Skip to content

COMPONENTS.md

This file tracks all available UI components in the codebase to help with component selection during development.

Available UI Components

Core UI Components

  • Accordion - Collapsible content sections
  • Alert - Important message display with variants (info, warning, error)
  • AlertDialog - Confirmation dialog for critical actions
  • Avatar - User avatar display with fallback
  • Badge - Small status indicators and labels
  • Breadcrumb - Navigation breadcrumb trail
  • Button - Primary interactive element with variants (default, destructive, outline, secondary, ghost, link)
  • Calendar - Date picker calendar component
  • Card - Content container with header, content, and footer sections
  • Checkbox - Checkbox input with label support
  • Collapsible - Expandable/collapsible content area
  • Command - Command palette/search interface
  • CurrencyInput - Currency-formatted number input
  • DatePicker - Date selection input with calendar
  • Dialog - Modal dialog component
  • DropdownMenu - Advanced dropdown with menu items, separators, and groups
  • HoverCard - Card that appears on hover with content
  • Popover - Floating content container
  • Progress - Progress bar indicator
  • ScrollArea - Custom scrollable area
  • Select - Dropdown selection component with search
  • Separator - Visual divider line (horizontal/vertical)
  • Sheet - Slide-out panel from edges
  • Sidebar - Collapsible navigation sidebar
  • Skeleton - Loading placeholder animations
  • Sonner - Toast notification system
  • Switch - Toggle switch component
  • Tabs - Tabbed content sections
  • Textarea - Multi-line text input
  • Tooltip - Hover tooltip with content

Form Components

  • Form - Form wrapper with react-hook-form integration
  • Input - Text input field with variants
  • InputOTP - One-time password input
  • Label - Form field label
  • PhoneInput - International phone number input with country detection

File Upload Components

  • FileUpload - Generic file upload component
  • ImageUpload - Image-specific upload with preview

Layout Components

  • AppFooter - Application footer
  • AppHeader - Application header with navigation
  • AppLayout - Main application layout wrapper
  • AppSidebar - Main application sidebar navigation
  • ConnectionErrorBoundary - Network connection error handler
  • ThemeSync - Theme synchronization component
  • UserMenu - User account dropdown menu

Data Display Components

  • DataTable - Advanced data table with features:
  • Sorting, filtering, pagination
  • Column visibility toggle
  • Row selection (single/multi)
  • Row expanding
  • Column pinning
  • Column/row drag & drop
  • Virtualization support
  • Export functionality
  • Bulk actions
  • Column resizing
  • Aggregation support
  • Tile - Interactive tile/card component
  • Loading - Loading spinner component
  • Logo - Company logo component

Notification Components

  • NotificationBadge - Unread notification counter
  • NotificationCenter - Main notification panel
  • NotificationEmpty - Empty state for notifications
  • NotificationItem - Individual notification display
  • NotificationList - List of notifications

User Profile Components

  • ProfileAvatar - User profile avatar with upload
  • ProfileForm - User profile edit form
  • ContactInfoForm - Contact information form
  • EditableContactField - Inline editable contact field

User Settings Components

  • NotificationPreferences - Notification settings panel
  • Preferences - General user preferences

Utility Components

  • SignOutButton - Authentication sign out button
  • ThemeToggle - Light/dark theme switcher

Component Usage Priority

  1. Check this list first - Use existing components
  2. Check ShadCN UI - Install with npx shadcn@latest add <component>
  3. Create custom - Only as last resort

Import Guidelines

  • Import components directly from their specific files to avoid circular dependencies:
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
  • Do NOT import from barrel exports like @/components/ui

Notes

  • All components support className prop for styling
  • Most components are built on Radix UI primitives
  • Components use TypeScript interfaces for props
  • All UI components have accompanying test files (.test.tsx)
  • All UI components have Storybook stories (.stories.tsx)
  • Use data-testid attributes for test automation
  • Components follow mobile-first responsive design
  • All components support light/dark theme automatically

Component Files Structure

Each UI component typically includes:

  • ComponentName.tsx - Main component implementation
  • ComponentName.test.tsx - Unit tests
  • ComponentName.stories.tsx - Storybook stories
  • index.ts - Export file
  • ComponentName.module.css - Component-specific styles (optional)