Navigation & feedback
Breadcrumb, Pagination, Alert, Spinner, Meter, Kbd, Description list, Empty state, Error state.
Rendered example — light + dark
Light
Breadcrumb
Alert
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.
Flashbar
Dark
Breadcrumb
Alert
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.
Flashbar
Recipes & props
A realistic usage snippet for this component. Imports come from
@/components/ui/….
See the
source
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>
);
}Live playground
Edit the snippet below — it transpiles and re-renders as you type. No
bundler, no imports needed: the components used here are already in
scope (see
src/lib/playground-scope.ts).
Edit the code — the preview updates as you type
Preview