FeedbackAvailable
Empty
An empty state with context and a useful next action.
Installation
Add the component and its dependencies from the registry running on your computer.
terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/empty.jsonUsage
Import the component into your project and keep the source code under your control.
tsx
'use client';
import Link from 'next/link';
import {
Empty,
EmptyHeader,
EmptyTitle,
EmptyDescription,
EmptyContent,
} from '@/components/ui/empty';
import { Button } from '@/components/ui/button';
export default function Demo() {
return (
<Empty>
<EmptyHeader>
<EmptyTitle>No saved components</EmptyTitle>
<EmptyDescription>
Save a component from the catalog to see it here.
</EmptyDescription>
</EmptyHeader>
<EmptyContent>
<Button
nativeButton={false}
render={<Link href="/en/docs/components/button" />}
>
Browse Button
</Button>
</EmptyContent>
</Empty>
);
}
States & interaction
Appearance, behavior and keyboard checks.
- Distinguish loading, progress, success, error and empty data as appropriate. Keep messages understandable without color.
- The indicator needs no hover. Only actions and dismiss controls receive focus. Respect reduced motion.
API Reference
BrutalLab-specific properties. Native attributes are supported as well.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | ? | Extends the root visual styles without changing its semantics. |
| children | ReactNode | ? | Compose the exported subcomponents as shown in the runnable example. |
Accessibility
Rules that should remain intact when adapting the component to a product.
Keep visible text labels and the semantic HTML shown in the example.
Retain keyboard focus styles and test the composition with keyboard navigation.
Use className for visual customization; preserve the primitive ARIA attributes.