Installation
npx @gnetleduck/cli add empty
npx @gnetleduck/cli add empty
Usage
import {
Empty,
EmptyContent,
EmptyDescription,
EmptyHeader,
EmptyMedia,
EmptyTitle,
} from "@/components/ui/empty"import {
Empty,
EmptyContent,
EmptyDescription,
EmptyHeader,
EmptyMedia,
EmptyTitle,
} from "@/components/ui/empty"<Empty>
<EmptyHeader>
<EmptyMedia variant="icon">
<Icon />
</EmptyMedia>
</EmptyHeader>
<EmptyTitle>No data</EmptyTitle>
<EmptyDescription>No data found</EmptyDescription>
<EmptyContent>
<Button>Add data</Button>
</EmptyContent>
</Empty><Empty>
<EmptyHeader>
<EmptyMedia variant="icon">
<Icon />
</EmptyMedia>
</EmptyHeader>
<EmptyTitle>No data</EmptyTitle>
<EmptyDescription>No data found</EmptyDescription>
<EmptyContent>
<Button>Add data</Button>
</EmptyContent>
</Empty>Examples
Outline
Use the border utility class to create a outline empty state.
Background
Use the bg-* and bg-gradient-* utilities to add a background to the empty state.
Avatar
Use the EmptyMedia component to display an avatar in the empty state.
Avatar Group
Use the EmptyMedia component to display an avatar group in the empty state.
InputGroup
You can add an InputGroup component to the EmptyContent component.
API Reference
Empty
The main component of the empty state. Wraps the EmptyHeader and EmptyContent components.
<Empty>
<EmptyHeader />
<EmptyContent />
</Empty><Empty>
<EmptyHeader />
<EmptyContent />
</Empty>EmptyHeader
The EmptyHeader component wraps the empty media, title, and description.
<EmptyHeader>
<EmptyMedia />
<EmptyTitle />
<EmptyDescription />
</EmptyHeader><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.
- variant: The variant of the empty media. Use
"icon"for an icon or"image"for an image.
<EmptyMedia variant="icon">
<Icon />
</EmptyMedia><EmptyMedia variant="icon">
<Icon />
</EmptyMedia><EmptyMedia>
<Avatar>
<AvatarImage src="..." />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
</EmptyMedia><EmptyMedia>
<Avatar>
<AvatarImage src="..." />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
</EmptyMedia>EmptyTitle
Use the EmptyTitle component to display the title of the empty state.
<EmptyTitle>No data</EmptyTitle><EmptyTitle>No data</EmptyTitle>EmptyDescription
Use the EmptyDescription component to display the description of the empty state.
<EmptyDescription>You do not have any notifications.</EmptyDescription><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.
<EmptyContent>
<Button>Add Project</Button>
</EmptyContent><EmptyContent>
<Button>Add Project</Button>
</EmptyContent>