UI Components Library

Overview

Shadcn/ui based component library with custom extensions for business needs.

Core Components

• Form controls (Input, Select, Checkbox, etc.)
• Layout components (Card, Sheet, Dialog)
• Navigation (Tabs, Breadcrumb, Pagination)
• Feedback (Toast, Alert, Badge)

Custom Components

• StatusBadge - Service status indicators
• ContactCell - Contact information display
• VehicleCell - Vehicle details display
• PhoneCell - Formatted phone numbers

Design Tokens

• Color palette with light/dark mode support
• Typography scale
• Spacing system
• Border radius and shadows
• Component variants via CVA

Follow-Up Status Colors

Semantic color tokens for follow-up statuses: - Pending (followup-pending) - Purple, awaiting action - Scheduled (followup-scheduled) - Blue, planned appointment - In Progress (followup-in-progress) - Cyan, active work - Cancelled (followup-cancelled) - Gray, cancelled status - Completed (followup-completed) - Green, successful completion - Upcoming (followup-upcoming) - Yellow, near-term action needed - Overdue (followup-overdue) - Red, missed deadline

Each token includes foreground color for optimal contrast.

Accessibility

• WCAG 2.1 AA compliance
• Keyboard navigation support
• Screen reader compatibility
• Focus management