Navigation & feedback
Breadcrumb, Pagination, Alert, Spinner, Meter, Kbd, Description list, Empty state, Error state.
src/components/ui/ Rendered example — light + dark
Light
Breadcrumb
Alert
Heads up
Saved
Something went wrong
Meter
Spinner
Kbd
Press ⌘ K to search
Pagination
Description list
- Plan
- Pro
- Seats
- 12 of 20
- Renews
- 2026-07-01
Empty state
No issues yet
When you file your first issue it'll show up here.
Error state
Failed to load issues
Check your connection and try again. GitHub API allows 60 requests/hour unauthenticated.
Dark
Breadcrumb
Alert
Heads up
Saved
Something went wrong
Meter
Spinner
Kbd
Press ⌘ K to search
Pagination
Description list
- Plan
- Pro
- Seats
- 12 of 20
- Renews
- 2026-07-01
Empty state
No issues yet
When you file your first issue it'll show up here.
Error state
Failed to load issues
Check your connection and try again. GitHub API allows 60 requests/hour unauthenticated.
Recipes & props
A realistic usage snippet for this component. Imports come from
@/components/ui/….
See the source file
src/components/ui/
for the full API.
import { Alert } from '@/components/ui/alert';
import { Spinner } from '@/components/ui/spinner';
import { Meter } from '@/components/ui/meter';
export function Status() {
return (
<div className="space-y-4">
<Alert variant="destructive">Build failed — see logs.</Alert>
<Spinner aria-label="Loading" />
<Meter value={72} aria-label="Disk usage" />
</div>
);
}Props API
ButtonProps | Prop | Type | Default | Description |
|---|---|---|---|
asChild opt | boolean | false | — |
CalloutProps | Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | — |
variant opt | 'default' | 'success' | 'warning' | 'error' | 'default' | — |
icon opt | React.ReactNode | — | Optional icon node (e.g. a Lucide icon element) shown beside the title. |
DataTableProps | Prop | Type | Default | Description |
|---|---|---|---|
columns | ColumnDef<TData, TValue>[] | — | — |
data | TData[] | — | — |
initialColumnVisibility opt | VisibilityState | {} | Initial column visibility — column id to visible boolean. |
initialGlobalFilter opt | string | '' | Initial global filter string. |
height opt | string | number | '500px' | Height of the scroll container in CSS units. Defaults to '500px'. |
estimateRowSize opt | number | 40 | Estimated row height in px for virtualization. Defaults to 40. |
syncToUrl opt | boolean | { key: string } | false | Sync filter/sort/visibility/sizing to URLSearchParams so views are shareable and survive page refresh. Pass `{ key: 'myTable' }` to namespace URL params when multiple DataTables share a page. Defaults to false (no URL syncing). |
DividerProps | Prop | Type | Default | Description |
|---|---|---|---|
children opt | React.ReactNode | — | Optional centered text label rendered between two rules. |
MetricProps | Prop | Type | Default | Description |
|---|---|---|---|
value | string | number | — | — |
label opt | string | — | — |
delta opt | { value: number; /** Semantic trend direction. Controls col… | — | — |
ProgressBarProps | Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Completion percentage, clamped to [0, 100]. |
label opt | string | — | Accessible name for screen readers. |
TrackerProps | Prop | Type | Default | Description |
|---|---|---|---|
data | TrackerBlock[] | — | — |