mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-16 04:11:34 +00:00
198 lines
3.9 KiB
Plaintext
198 lines
3.9 KiB
Plaintext
---
|
|
title: Empty
|
|
description: Use the Empty component to display an empty state.
|
|
component: true
|
|
---
|
|
|
|
<ComponentPreview name="empty-demo" className="[&_.preview]:p-0" />
|
|
|
|
## Installation
|
|
|
|
<CodeTabs>
|
|
|
|
<TabsList>
|
|
<TabsTrigger value="cli">CLI</TabsTrigger>
|
|
<TabsTrigger value="manual">Manual</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="cli">
|
|
|
|
```bash
|
|
npx shadcn@latest add empty
|
|
```
|
|
|
|
</TabsContent>
|
|
|
|
<TabsContent value="manual">
|
|
|
|
<Steps>
|
|
|
|
<Step>Copy and paste the following code into your project.</Step>
|
|
|
|
<ComponentSource name="empty" title="components/ui/empty.tsx" />
|
|
|
|
<Step>Update the import paths to match your project setup.</Step>
|
|
|
|
</Steps>
|
|
|
|
</TabsContent>
|
|
|
|
</CodeTabs>
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import {
|
|
Empty,
|
|
EmptyContent,
|
|
EmptyDescription,
|
|
EmptyHeader,
|
|
EmptyMedia,
|
|
EmptyTitle,
|
|
} from "@/components/ui/empty"
|
|
```
|
|
|
|
```tsx
|
|
<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.
|
|
|
|
<ComponentPreview
|
|
name="empty-outline"
|
|
className="[&_.preview]:p-6 md:[&_.preview]:p-10"
|
|
/>
|
|
|
|
### Background
|
|
|
|
Use the `bg-*` and `bg-gradient-*` utilities to add a background to the empty state.
|
|
|
|
<ComponentPreview name="empty-background" className="[&_.preview]:p-0" />
|
|
|
|
### Avatar
|
|
|
|
Use the `EmptyMedia` component to display an avatar in the empty state.
|
|
|
|
<ComponentPreview name="empty-avatar" className="[&_.preview]:p-0" />
|
|
|
|
### Avatar Group
|
|
|
|
Use the `EmptyMedia` component to display an avatar group in the empty state.
|
|
|
|
<ComponentPreview name="empty-avatar-group" className="[&_.preview]:p-0" />
|
|
|
|
### InputGroup
|
|
|
|
You can add an `InputGroup` component to the `EmptyContent` component.
|
|
|
|
<ComponentPreview name="empty-input-group" className="[&_.preview]:p-0" />
|
|
|
|
## API Reference
|
|
|
|
### Empty
|
|
|
|
The main component of the empty state. Wraps the `EmptyHeader` and `EmptyContent` components.
|
|
|
|
| Prop | Type | Default |
|
|
| ----------- | -------- | ------- |
|
|
| `className` | `string` | |
|
|
|
|
```tsx
|
|
<Empty>
|
|
<EmptyHeader />
|
|
<EmptyContent />
|
|
</Empty>
|
|
```
|
|
|
|
### EmptyHeader
|
|
|
|
The `EmptyHeader` component wraps the empty media, title, and description.
|
|
|
|
| Prop | Type | Default |
|
|
| ----------- | -------- | ------- |
|
|
| `className` | `string` | |
|
|
|
|
```tsx
|
|
<EmptyHeader>
|
|
<EmptyMedia />
|
|
<EmptyTitle />
|
|
<EmptyDescription />
|
|
</EmptyHeader>
|
|
```
|
|
|
|
### EmptyMedia
|
|
|
|
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` | |
|
|
|
|
```tsx
|
|
<EmptyMedia variant="icon">
|
|
<Icon />
|
|
</EmptyMedia>
|
|
```
|
|
|
|
```tsx
|
|
<EmptyMedia>
|
|
<Avatar>
|
|
<AvatarImage src="..." />
|
|
<AvatarFallback>CN</AvatarFallback>
|
|
</Avatar>
|
|
</EmptyMedia>
|
|
```
|
|
|
|
### EmptyTitle
|
|
|
|
Use the `EmptyTitle` component to display the title of the empty state.
|
|
|
|
| Prop | Type | Default |
|
|
| ----------- | -------- | ------- |
|
|
| `className` | `string` | |
|
|
|
|
```tsx
|
|
<EmptyTitle>No data</EmptyTitle>
|
|
```
|
|
|
|
### EmptyDescription
|
|
|
|
Use the `EmptyDescription` component to display the description of the empty state.
|
|
|
|
| Prop | Type | Default |
|
|
| ----------- | -------- | ------- |
|
|
| `className` | `string` | |
|
|
|
|
```tsx
|
|
<EmptyDescription>You do not have any notifications.</EmptyDescription>
|
|
```
|
|
|
|
### EmptyContent
|
|
|
|
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` | |
|
|
|
|
```tsx
|
|
<EmptyContent>
|
|
<Button>Add Project</Button>
|
|
</EmptyContent>
|
|
```
|