Navigation & feedback
Breadcrumb, Pagination, Alert, Spinner, Meter, Kbd, Description list, Empty state, Error state.
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
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>
);
}