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
pnpm add @rhinolabs/ui
 
# yarn
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
Input - Text input fields for data entry
Textarea - Multi-line text input areas
Select - Dropdown selection menus
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

Layout & Structure

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

Breadcrumb - Hierarchical navigation paths
Pagination - Page navigation controls
Tabs - Content section organizers
Sidebar - Side navigation panels

Data Presentation

Table - Structured data displays
Calendar - Date and time displays
Avatar - User or entity representations
Badge - Status and notification indicators

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
Skeleton - Loading state placeholders