Components List

Name: SyncBooks
Rating: 4.8 (50 reviews)

All 37 pre-styled components available in @syncbooks/addon-sdk/components.

Import: import { ComponentName } from '@syncbooks/addon-sdk/components'

Form Components

Component	Description
`Button`	Primary action button with variants (default, outline, ghost, destructive, link) and sizes (sm, md, lg). Supports loading state.
`Input`	Text input with label, placeholder, and error message support.
`Textarea`	Multi-line text input with label and error support.
`Select`	Dropdown select with options array, placeholder, and error.
`Checkbox`	Checkbox input with label.
`Switch`	Toggle switch with label. Controlled component.
`RadioGroup`	Radio button group with options, horizontal/vertical layout.
`SearchInput`	Search input with built-in debounce (300ms default), search icon.
`CurrencyInput`	Number input formatted as currency with symbol prefix (GH₵).
`DateInput`	Native date picker with label and error support.
`FileInput`	Drag-and-drop file upload with click-to-browse fallback, file type/size validation.

Component	Description
`ResourcePicker`	Searchable dropdown that fetches records from SyncBooks API. Works with customers, products, invoices, vendors, employees, projects.
`PermissionGate`	Conditionally renders children based on granted scopes. Supports single scope, array of scopes, and fallback UI.
`Form`	Declarative form with validation, loading state, submit error handling. Render props pattern.

Component	Description
`PageLayout`	Standard page structure with title, description, actions slot, breadcrumb, and footer.
`Card`	Container with border and shadow. Sub-components: CardHeader, CardTitle, CardDescription, CardContent, CardFooter.
`Tabs`	Tab navigation with content panels. Accepts array of { id, label, content } objects.
`Divider`	Horizontal rule with optional centered text.
`Drawer`	Slide-in panel (left or right) with header, scrollable content, and footer. Closes on Escape or backdrop click.

Component	Description
`DataTable`	Full-featured table with columns, search, pagination, loading skeleton, empty state, row click handler. The most-used component.
`Table`	Basic table with sub-components: TableHeader, TableBody, TableRow, TableHead, TableCell.
`List / ListItem`	Styled list with icon, title, subtitle, and action slot per item.
`StatCard`	Metric card showing label, value, optional trend percentage, and subtext.
`Badge`	Inline label with variants: default, success, warning, error, outline.
`StatusBadge`	Pre-colored badge for common statuses (draft, sent, paid, overdue, active, cancelled, etc.).
`Avatar`	User avatar — shows image or generates initials fallback. Sizes: sm, md, lg.
`Progress`	Progress bar with label, percentage, color variants, and sizes.
`Pagination`	Previous/Next page controls with current page display.

Component	Description
`Alert`	Banner with variants: info (blue), success (green), warning (amber), error (red). Optional title.
`Spinner`	Animated loading spinner. Sizes: sm, md, lg.
`Skeleton / SkeletonRow / SkeletonCard`	Animated placeholder for loading states. Pre-made variants for table rows and cards.
`EmptyState`	Centered placeholder for empty data — icon, title, description, action button.
`ErrorBoundary`	Catches JavaScript errors in children and shows fallback UI with retry button.
`LoadingOverlay`	Full-screen semi-transparent loading indicator with message.
`Tooltip`	Hover tooltip with configurable position (top, bottom, left, right).

Component	Description
`Dialog`	Modal dialog with sub-components: DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter.
`ConfirmDialog`	Pre-built confirmation modal for destructive actions. Props: title, description, confirmLabel, variant, loading.

For detailed usage examples of each component, see UI Components guide.