Component Library
A showcase of all available UI components.
Form Components
Select an option
Layout Components
Container
Container (size="sm")
Stack
Stack Item 1
Stack Item 2
Stack Item 3
Flex
Flex Item 1
Flex Item 2
Flex Item 3
Divider
Content above divider
Content below divider
Left
Right
Right
Form System
Complete form with validation using useForm hook, FormField, and FormGroup components.
Feedback Components
Toast
Click buttons to trigger toast notifications.
Alert
Information
This is an informational alert.
Operation completed successfully!
Warning
Please review before continuing.
Something went wrong. Please try again.
This alert can be dismissed. Click the X to close.
Modal
Confirm Dialog
Spinner
Loading...
SmallLoading...
MediumLoading...
LargeLoading...Loading...
Skeleton
Basic variants:
Preset skeletons:
CardSkeleton
AvatarSkeleton
TableRowSkeleton
Data Display Components
Table
Sortable table with custom cell rendering.
| Name | Role | Status | |
|---|---|---|---|
| John Doe | john@example.com | Admin | active |
| Jane Smith | jane@example.com | Editor | active |
| Bob Wilson | bob@example.com | Viewer | inactive |
Empty State
No results found
Try adjusting your search or filter to find what you're looking for.
Badge
Variants:
DefaultPrimarySuccessWarningDanger
With dot indicator:
ActiveOfflinePending
Rounded (pill):
v1.0.0NewRemovable
Sizes:
SmallMediumLarge
Avatar
With initials:
JD
JS
BW
A
CB
Fallback (no name or image):
Avatar Group:
JD
JS
BW
AJ
+2
Navigation Components
Breadcrumbs
Tabs
Line variant (default):
Overview content goes here.
Pills variant: