Empty
Use the Empty component to display an empty state, with a title, description, and optional actions.
Last updated January 1, 1980
CreditsUnchangedPublished
Copied from shadcn/ui.
Overview
Installation
Usage
import {
Empty,
EmptyContent,
EmptyDescription,
EmptyHeader,
EmptyMedia,
EmptyTitle,
} from "@/components/ui/empty"
export function Example() {
return (
<Empty>
<EmptyHeader>
<EmptyMedia variant="icon">
<Icon />
</EmptyMedia>
<EmptyTitle>No data</EmptyTitle>
<EmptyDescription>No data found</EmptyDescription>
</EmptyHeader>
<EmptyContent>
<Button>Add data</Button>
</EmptyContent>
</Empty>
)
}Examples
Outline
Use the border utility class to create an outline empty state.
Background
Use the bg-* utilities to add a background to the empty state.
Input Group
Add an InputGroup component to EmptyContent.
RTL
No city found
A pattern for City Selector 's dependent city field before a province is chosen.
API Reference
EmptyMedia
API reference: shadcn/ui EmptyMedia .