Components Overview
Welcome to the component library! Below you'll find all available UI components organized by category to help you quickly find what you need.
🎯 Form & Input Components
Essential components for building forms and capturing user input.
- Button - Versatile button component with multiple variants (default, destructive, outline, secondary, ghost, link, dashed) and sizes
- Input - Standard text input field with consistent styling
- Textarea - Multi-line text input for longer content
- Checkbox - Binary choice input with custom styling
- Radio Group - Single selection from multiple options
- Switch - Toggle switch for boolean settings
- Slider - Range input for selecting numeric values
- Select - Dropdown selection component
- Label - Accessible labels for form controls
- Form - Form wrapper with validation support
- Input OTP - One-time password input component
🎨 Display & Layout Components
Components for organizing and displaying content effectively.
- Card - Flexible container for grouping related content
- Avatar - User profile image with fallback support
- Badge - Small status indicators and labels
- Alert - Important messages and notifications
- Separator - Visual dividers between content sections
- Skeleton - Loading placeholders for content
- Progress - Progress indicators for ongoing tasks
- Aspect Ratio - Maintain consistent aspect ratios
- Scroll Area - Custom scrollable containers
- Resizable - Resizable panel components
🗂️ Navigation Components
Components for site navigation and wayfinding.
- Navigation Menu - Main navigation with dropdown support
- Breadcrumb - Hierarchical navigation trail
- Tabs - Tabbed interface for content organization
- Pagination - Navigate through paginated content
- Sidebar - Collapsible sidebar navigation
- Menubar - Application menu bar
🎪 Interactive Components
Components that provide rich user interactions and overlays.
- Dialog - Modal dialogs for focused interactions
- Alert Dialog - Confirmation and alert modals
- Sheet - Slide-out panels from screen edges
- Drawer - Mobile-friendly bottom drawer
- Popover - Floating content containers
- Tooltip - Contextual help and information
- Hover Card - Rich content on hover
- Dropdown Menu - Contextual action menus
- Context Menu - Right-click context menus
- Command - Command palette and search interface
- Calendar - Date picker and calendar component
- Carousel - Image and content carousels
🔧 Utility Components
Specialized components for specific use cases.
- Collapsible - Expandable/collapsible content sections
- Accordion - Expandable content panels
- Toggle - Toggle button for binary states
- Toggle Group - Group of related toggle buttons
- Table - Data tables with consistent styling
- Sonner - Toast notifications
📊 Data Visualization
Components for displaying data and analytics.
- Chart - Comprehensive charting component built on Recharts with support for various chart types, themes, and interactive tooltips
Getting Started
Each component is built with:
- Accessibility in mind following WAI-ARIA guidelines
- TypeScript support with full type definitions
- Customizable styling using CSS variables and Tailwind CSS
- Radix UI primitives for robust functionality
- Responsive design that works across all devices
Browse the individual component documentation to see usage examples, API references, and customization options.