Projects
Form Inputs
Various form input components
Select
Dropdown selection components
Input Group
Control field with leading/trailing content and various states
~
~
~
~
~
~
~
~
~
~
~
$
Current value: 10 pips
Badges
Different badge styles
DefaultSecondaryDestructiveOutline
Avatar
User avatars with fallback support
CNJDAB
Alerts
Notification alerts
Heads up!
You can add components to your app using the cli.
Error
Your session has expired. Please log in again.
Pagination
Page navigation controls
Tabs
Default Tabs
Pill-style toggle for small in-place switches
Make changes to your account here.
Boxed Tabs
Classic tab bar for significant content switching between sections
Report table and filters go here.
Accordion
Collapsible content sections
Table
Data table display
| Invoice | Status | Method | Amount |
|---|---|---|---|
INV001 | Paid | Credit Card | $250.00 |
INV002 | Pending | PayPal | $150.00 |
INV003 | Unpaid | Bank Transfer | $350.00 |
Total | $750.00 | ||
Dialog
Modal dialog windows
RndDialog
Dialog windows using react-rnd — drag the header to move, resize from edges
Popover
Floating content panels
Tooltip
Hover information tooltips
Card
Card Title
Card description goes here
Card content with some text.
Card with Action
This card has an action button
The CardAction component positions content in the top right.
Separator
Visual dividers
Radix Primitives
An open-source UI component library.
Blog
Docs
Source
Skeleton
Loading placeholder animations