UI Demo
Navigation
Version 1.0.0
UI Component
Interactive demonstration of all components with test IDs
Component Test Summary
Input: "empty"
Checkbox: off
Switch: off
Toasts: 0
Buttons
#buttons
Badges
#badges
Default
Secondary
Outline
Destructive
Alerts
#alerts
Default Alert
This is a default alert message.
Error
Something went wrong!
Form Inputs
#inputs
Toggle Controls
#toggles
Slider & Progress
#sliders
OTP Input
#otp
Value: empty
Calendar
#calendar
March 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Selected: Loading...
Toasts & Notifications
#notifications
Total toasts triggered: 0
Dialogs & Overlays
#overlays
Menus & Dropdowns
#menus
Right Click
Card Component
#card
Card Title
Card description text
Card content goes here.
Card footer
Tabs
#tabs
Content for Tab 1
Accordion & Collapsible
#accordion
Table
#table
| Invoice | Status | Amount |
|---|---|---|
| INV001 | Paid | $250.00 |
| INV002 | Pending | $150.00 |
Pagination
#pagination
Current page: 1
Avatar & Skeleton
#avatar
CNAB
Hover Card
#hovercard
Command Palette
#command
No results found.
Suggestions
Calendar
Search
Settings
Resizable Panels
#resizable
Panel A
Panel B
Scroll Area
#scrollarea
Scrollable item 1
Scrollable item 2
Scrollable item 3
Scrollable item 4
Scrollable item 5
Scrollable item 6
Scrollable item 7
Scrollable item 8
Scrollable item 9
Scrollable item 10
Scrollable item 11
Scrollable item 12
Scrollable item 13
Scrollable item 14
Scrollable item 15
Scrollable item 16
Scrollable item 17
Scrollable item 18
Scrollable item 19
Scrollable item 20
Aspect Ratio
#aspectratio
16:9 Aspect Ratio
Carousel
#carousel
1
2
3
4
5
Chart
#chart
Navigation Menu
#navigation
Menubar
#menubar