mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-25 13:46:07 +00:00
47c47eaed2
* feat: add base and radix docs * feat: transform code for display * fix * fix * fix * fix * fix * chore: remove claude files * fix * fix * fix * chore: run format:write * fix * feat: add more examples * fix * feat: add aspect-ratio * feat: add avatar * feat: add badge * feat: add breadcrumb * fix * feat: add button * fix * fix * fix * feat: add calendar and card * feat: add carousel * fix: chart * feat: add checkbox * feat: add collapsible * feat: add combobox * feat: add command * feat: add context menu * feat: add data-table dialog and drawer * feat: dropdown-menu * feat: add date-picker * feat: add empty * feat: add field and hover-card * fix: input * feat: add input * feat: add input-group * feat: add input-otp * feat: add item * feat: add kbd and label * feat: add menubar * feat: add native-select * feat: add more components * feat: more components * feat: more components * feat: add skeleton, slider and sonner * feat: add spinner and switch * feat: add more components * fix: tabs * fix: tabs * feat: add docs for sidebar * fix * fix * fi * docs: update * fix: create page * fix * fix * chore: add changelog * fix
224 lines
4.1 KiB
Plaintext
224 lines
4.1 KiB
Plaintext
---
|
|
title: Empty
|
|
description: Use the Empty component to display an empty state.
|
|
base: base
|
|
component: true
|
|
---
|
|
|
|
<ComponentPreview
|
|
styleName="base-nova"
|
|
name="empty-demo"
|
|
previewClassName="h-96 p-0"
|
|
/>
|
|
|
|
## Installation
|
|
|
|
<CodeTabs>
|
|
|
|
<TabsList>
|
|
<TabsTrigger value="cli">Command</TabsTrigger>
|
|
<TabsTrigger value="manual">Manual</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="cli">
|
|
|
|
```bash
|
|
npx shadcn@latest add empty
|
|
```
|
|
|
|
</TabsContent>
|
|
|
|
<TabsContent value="manual">
|
|
|
|
<Steps className="mb-0 pt-2">
|
|
|
|
<Step>Copy and paste the following code into your project.</Step>
|
|
|
|
<ComponentSource
|
|
name="empty"
|
|
title="components/ui/empty.tsx"
|
|
styleName="base-nova"
|
|
/>
|
|
|
|
<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
|
|
styleName="base-nova"
|
|
name="empty-outline"
|
|
previewClassName="h-96 p-6 md:p-10"
|
|
/>
|
|
|
|
### Background
|
|
|
|
Use the `bg-*` and `bg-gradient-*` utilities to add a background to the empty state.
|
|
|
|
<ComponentPreview
|
|
styleName="base-nova"
|
|
name="empty-background"
|
|
previewClassName="h-96 p-0"
|
|
/>
|
|
|
|
### Avatar
|
|
|
|
Use the `EmptyMedia` component to display an avatar in the empty state.
|
|
|
|
<ComponentPreview
|
|
styleName="base-nova"
|
|
name="empty-avatar"
|
|
previewClassName="h-96 p-0"
|
|
/>
|
|
|
|
### Avatar Group
|
|
|
|
Use the `EmptyMedia` component to display an avatar group in the empty state.
|
|
|
|
<ComponentPreview
|
|
styleName="base-nova"
|
|
name="empty-avatar-group"
|
|
previewClassName="h-96 p-0"
|
|
/>
|
|
|
|
### InputGroup
|
|
|
|
You can add an `InputGroup` component to the `EmptyContent` component.
|
|
|
|
<ComponentPreview
|
|
styleName="base-nova"
|
|
name="empty-input-group"
|
|
previewClassName="h-96 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>
|
|
```
|