apps/v4/content/docs/components/radix/empty.mdx
<ComponentPreview styleName="radix-nova" name="empty-demo" previewClassName="h-96 p-0" />
npx shadcn@latest add empty
<Step>Copy and paste the following code into your project.</Step>
<ComponentSource name="empty" title="components/ui/empty.tsx" styleName="radix-nova" />
<Step>Update the import paths to match your project setup.</Step>
</Steps> </TabsContent> </CodeTabs>import {
Empty,
EmptyContent,
EmptyDescription,
EmptyHeader,
EmptyMedia,
EmptyTitle,
} from "@/components/ui/empty"
<Empty>
<EmptyHeader>
<EmptyMedia variant="icon">
<Icon />
</EmptyMedia>
<EmptyTitle>No data</EmptyTitle>
<EmptyDescription>No data found</EmptyDescription>
</EmptyHeader>
<EmptyContent>
<Button>Add data</Button>
</EmptyContent>
</Empty>
Use the border utility class to create an outline empty state.
<ComponentPreview styleName="radix-nova" name="empty-outline" previewClassName="h-96 p-6 md:p-10" />
Use the bg-* and bg-gradient-* utilities to add a background to the empty state.
<ComponentPreview styleName="radix-nova" name="empty-background" previewClassName="h-96 p-0" />
Use the EmptyMedia component to display an avatar in the empty state.
<ComponentPreview styleName="radix-nova" name="empty-avatar" previewClassName="h-96 p-0" />
Use the EmptyMedia component to display an avatar group in the empty state.
<ComponentPreview styleName="radix-nova" name="empty-avatar-group" previewClassName="h-96 p-0" />
You can add an InputGroup component to the EmptyContent component.
<ComponentPreview styleName="radix-nova" name="empty-input-group" previewClassName="h-96 p-0" />
To enable RTL support in shadcn/ui, see the RTL configuration guide.
<ComponentPreview styleName="radix-nova" name="empty-rtl" direction="rtl" />The main component of the empty state. Wraps the EmptyHeader and EmptyContent components.
| Prop | Type | Default |
|---|---|---|
className | string |
<Empty>
<EmptyHeader />
<EmptyContent />
</Empty>
The EmptyHeader component wraps the empty media, title, and description.
| Prop | Type | Default |
|---|---|---|
className | string |
<EmptyHeader>
<EmptyMedia />
<EmptyTitle />
<EmptyDescription />
</EmptyHeader>
Use the EmptyMedia component to display the media of the empty state such as an icon or an image. You can also use it to display other components such as an avatar.
| Prop | Type | Default |
|---|---|---|
variant | "default" | "icon" | default |
className | string |
<EmptyMedia variant="icon">
<Icon />
</EmptyMedia>
<EmptyMedia>
<Avatar>
<AvatarImage src="..." />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
</EmptyMedia>
Use the EmptyTitle component to display the title of the empty state.
| Prop | Type | Default |
|---|---|---|
className | string |
<EmptyTitle>No data</EmptyTitle>
Use the EmptyDescription component to display the description of the empty state.
| Prop | Type | Default |
|---|---|---|
className | string |
<EmptyDescription>You do not have any notifications.</EmptyDescription>
Use the EmptyContent component to display the content of the empty state such as a button, input or a link.
| Prop | Type | Default |
|---|---|---|
className | string |
<EmptyContent>
<Button>Add Project</Button>
</EmptyContent>