n2020
| Component | Description |
|---|---|
| Chart Card | A card with a title and a description above a chart. |
| Data Table | A table built on TanStack Table with a column visibility menu, a toolbar slot, and a footer slot. |
| Data Table Pagination | Page controls for a table, with a row range, a page size select, and page buttons. |
| Date Range Picker | Preset range buttons and a calendar popover for a custom date and time range. |
| Dither | Ordered-dither SVG patterns, a meter, and a WebGL canvas for dithered shaders. |
| Page Header | A page title with an eyebrow line and an actions slot over a Sky background. |
| Sky | An animated WebGL background of dithered clouds. |
| Stat | A tile with a label, a large number, an optional meter, and a caption. |
Base
| Component | Description |
|---|---|
| Avatar | Displays an image that represents a user, with a fallback. |
| Badge | Displays a short label, such as a status or a count. |
| Breadcrumb | Displays the path to the current page as a list of links. |
| Button | Displays a button or a component that looks like a button. |
| Calendar | A month grid for picking a date or a date range. |
| Card | Displays a container with a header, content, and a footer. |
| Chart | Displays data as a chart, built on Recharts. |
| Checkbox | A control that switches between checked and unchecked. |
| Collapsible | Shows and hides a panel of content. |
| Command | A searchable list of commands that you filter by typing. |
| Dialog | A window that opens over the page and blocks the content behind it. |
| Drawer | A panel that slides in from an edge of the screen and closes with a swipe. |
| Dropdown Menu | A menu of actions that opens from a button. |
| Empty | Displays a message and actions when there is no content to show. |
| Field | Layout parts that combine a label, a control, help text, and an error message. |
| Input Group | An input or textarea with icons, text, or buttons attached to its edges. |
| Input OTP | A one-time password input with one slot per character. |
| Input | A single-line text field. |
| Kbd | Displays a key or a combination of keys. |
| Label | A caption for a form control. |
| Popover | A floating panel that opens next to its trigger. |
| Select | A button that opens a list of options and shows the chosen one. |
| Separator | Displays a line that divides content. |
| Sheet | A panel that slides in from an edge of the screen. |
| Sidebar | Displays the navigation of an application in a panel at the side of the page. |
| Skeleton | Displays a placeholder while content loads. |
| Sonner | Displays a toast, a short message that appears over the page. |
| Table | Displays rows of data in columns. |
| Tabs | Displays one panel of content at a time, selected by a tab. |
| Textarea | A multi-line text field. |
| Toggle Group | A set of toggle buttons that share one value. |
| Toggle | A button that stays pressed until you press it again. |
| Tooltip | A short label that appears when you hover or focus an element. |