Core Components
shadcn/ui components styled with Clinic Admin design tokens. Select a component to view its preview and AI prompt.
Alert
Inline informational and warning feedback.
Alert Dialog
Modal dialog for confirmations and destructive actions.
Avatar
User identity chips with fallback initials.
Badge
Compact status labels for patient states, appointment statuses, and informational tags.
Breadcrumbs
Navigation trail showing the current location in the hierarchy.
Button
Triggers actions and events. Primary, secondary, ghost, outline, and destructive variants aligned to Clinic Admin brand tokens.
Button Group
Grouped buttons with optional dropdown.
Calendar
Date picker and calendar views.
Card
Container for grouped content — patient summaries, appointment panels, stat widgets.
Card with Image
Card layout with image header.
Chart
Data visualizations and charts.
Checkbox
Boolean toggle for forms.
Combobox
Autocomplete input with selectable options.
Complex Form
Multi-column and scheduling-style layout (contrasts with the simple Form example).
Dialog
General-purpose modal for forms and rich content (not the same as Alert Dialog).
Drawer
Slide-out panel from edge.
Dropdown Menu
Contextual menu triggered by a button or action.
Empty State
Placeholder when no data or content.
Field
Form field with label, description, and error message. Use with Input, Textarea, Select, Checkbox, and Radio for grouped form layouts.
Form
Simple single-column contact-style form (stacked fields and actions).
Icons
Icon set and usage. This design system uses Lucide React icons.
Input
Text input fields for forms, search, and data entry. Default, focus, error, and disabled states.
Input Group
Input with addons, icons, or buttons.
Input OTP
One-time code or PIN input.
Item
List item with meta and actions.
Pagination
Navigate between pages of content.
Popover
Floating panel triggered by a button or control.
Radio Group
Single selection from options.
Select
Select input for choosing from a list of options.
Separator
Visual divider between content.
Sheet
Slide-over panel.
Skeleton
Placeholder for loading content.
Slider
Select a value from a range.
Spinner
Loading indicator.
Switch
Toggle control.
Table
Data table with sort and pagination.
Tabs
Switch between panels of content.
Textarea
Multi-line text input for longer content.
Toast
Temporary notification.
Tooltip
Contextual hint on hover.