Components
Empty
A placeholder for empty states.
Empty renders a placeholder for empty states, with slots for media, a title, a description, and custom content.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/empty.jsonUsage
import {
Empty,
EmptyDescription,
EmptyHeader,
EmptyMedia,
EmptyTitle,
} from "@/components/ui/empty";
export default function Example() {
return (
<Empty>
<EmptyHeader>
<EmptyMedia />
<EmptyTitle>No results</EmptyTitle>
<EmptyDescription>Try adjusting your search.</EmptyDescription>
</EmptyHeader>
</Empty>
);
}Examples
Default
No results
Try adjusting your search or filters.
With content
Your inbox is empty
New messages will appear here.
API
Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.
| Part | Built on | Props |
|---|---|---|
Emptydata-slot="empty" | <div>HTML | — |
EmptyHeaderdata-slot="empty-header" | <div>HTML | — |
EmptyMediadata-slot="empty-icon" | <div>HTML |
|
EmptyTitledata-slot="empty-title" | <div>HTML | — |
EmptyDescriptiondata-slot="empty-description" | <p>HTML | — |
EmptyContentdata-slot="empty-content" | <div>HTML | — |
Changelog
- v0.1.0Accessibility, correctness, and token fixes across the kit, from a full code-smell audit.minor
Last updated on