Components

Our component library provides a comprehensive set of modern, accessible, and highly customizable UI components built with React and Tailwind CSS. These components are designed to help you create robust and consistent user interfaces with minimal effort while following best practices in web development.

Installation

Install the UI components package via your package manager:

# npm
npm install @rhinolabs/ui

pnpm add @rhinolabs/ui

yarn add @rhinolabs/ui

Then you can import and use any component in your React application:

import { Button, Input, Card } from "@rhinolabs/ui"

export default function App() {
  return (
    <Card>
      <Input placeholder="Enter your name" />
      <Button>Submit</Button>
    </Card>
  )
}

Component Categories

User Input

Button - Interactive buttons for triggering actions
Button Group - Grouped buttons with separators
Input - Text input fields for data entry
Input Group - Input with addons and controls
Input OTP - One-time password input
Textarea - Multi-line text input areas
Select - Dropdown selection menus
Native Select - Native HTML select element
Checkbox - Single or multiple option selectors
Radio Group - Exclusive option selectors
Switch - Toggle switches for binary choices
Toggle - Two-state buttons for toggling options
Toggle Group - Groups of toggle buttons

Forms

Field - Form field with label and validation

Layout & Structure

Accordion - Expandable/collapsible content panels
Aspect Ratio - Enforce specific aspect ratios
Card - Contained content blocks
Separator - Visual dividers between content
Sheet - Slide-out panels and drawers
Collapsible - Expandable/collapsible sections
Resizable - Adjustable-size containers
Scroll Area - Custom scrollable containers
Item - Flexible list item component

Breadcrumb - Hierarchical navigation paths
Pagination - Page navigation controls
Tabs - Content section organizers
Sidebar - Side navigation panels
Menubar - Horizontal menu bar
Navigation Menu - Navigation with submenus

Data Presentation

Table - Structured data displays
Calendar - Date and time displays
Carousel - Image carousel component
Avatar - User or entity representations
Badge - Status and notification indicators
Kbd - Keyboard key notation
Typography - Headings, paragraphs, and text styles

Interactive Overlays

Dialog - Modal windows for focused tasks
Popover - Contextual floating content
Tooltip - Helpful hover information
Dropdown Menu - Contextual action menus
Context Menu - Right-click action menus
Command - Command palettes and search interfaces

User Feedback

Alert - Important message displays
Toast - Temporary notifications
Empty - Empty state displays
Spinner - Loading indicator
Skeleton - Loading state placeholders