Component Library
Reusable UI components built on shadcn/ui with Pet360 customizations.
IMPLEMENTATION
Built on shadcn/ui + Radix UI primitives. All components are accessible (WCAG 2.1 AA) and support keyboard navigation.
Actions
| Component | Variants | Usage |
|---|---|---|
| Button | defaultsecondaryoutlineghostdestructive | Primary interactions |
| IconButton | defaultghost | Compact actions |
| LinkButton | inlinestandalone | Navigation actions |
Forms
| Component | Variants | Usage |
|---|---|---|
| Input | defaulterrordisabled | Text entry |
| Select | defaultsearchablemulti | Option selection |
| Checkbox | defaultindeterminate | Boolean choice |
| Radio | defaultcard | Single selection |
| DatePicker | singlerange | Date selection |
Layout
| Component | Variants | Usage |
|---|---|---|
| Card | defaultinteractivehighlighted | Content container |
| Dialog | defaultconfirmationform | Modal overlay |
| Sheet | leftrightbottom | Slide-out panel |
| Tabs | defaultpills | Content sections |
Data Display
| Component | Variants | Usage |
|---|---|---|
| Table | defaultselectablesortable | Tabular data |
| Badge | defaultsecondaryoutlinedestructive | Status indicators |
| Avatar | imageinitialsicon | Entity representation |
| Timeline | defaultcompact | Event history |
Feedback
| Component | Variants | Usage |
|---|---|---|
| Toast | successerrorwarninginfo | Transient messages |
| Alert | defaultdestructivewarning | Inline messages |
| Progress | barcircular | Loading states |
| Skeleton | textcardtable | Loading placeholders |