Empty
A component to display an empty state.
You haven't created any projects yet. Get started by creating your first project.
Installation
pnpm dlx shadcn-vue@latest add empty
Usage
<script setup lang="ts">
import { FolderOpen } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import {
Empty,
EmptyContent,
EmptyDescription,
EmptyHeader,
EmptyMedia,
EmptyTitle,
} from '@/components/ui/empty'
</script>
<template>
<Empty>
<EmptyHeader>
<EmptyMedia variant="icon">
<FolderOpen />
</EmptyMedia>
<EmptyTitle>No data</EmptyTitle>
<EmptyDescription>No data found</EmptyDescription>
</EmptyHeader>
<EmptyContent>
<Button>Add data</Button>
</EmptyContent>
</Empty>
</template>
Examples
Outline
Use the border
utility class to create a outline empty state.
Upload files to your cloud storage to access them anywhere.
Background
Use the bg-*
and bg-gradient-*
utilities to add a background to the empty state.
You're all caught up. New notifications will appear here.
Avatar
Use the EmptyMedia
component to display an avatar in the empty state.
This user is currently offline. You can leave a message to notify them or try again later.
Avatar Group
Use the EmptyMedia
component to display an avatar group in the empty state.
Invite your team to collaborate on this project.
InputGroup
You can add an InputGroup
component to the EmptyContent
component.
The page you're looking for doesn't exist. Try searching for what you need below.
Need help? Contact support
API Reference
Empty
The main component of the empty state. Wraps the EmptyHeader
and EmptyContent
components.
Prop | Type | Default |
---|---|---|
class | string |
<Empty>
<EmptyHeader />
<EmptyContent />
</Empty>
EmptyHeader
The EmptyHeader
component wraps the empty media, title, and description.
Prop | Type | Default |
---|---|---|
class | string |
<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 |
class | string |
<EmptyMedia variant="icon">
<Icon />
</EmptyMedia>
<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 |
---|---|---|
class | string |
<EmptyTitle>
No data
</EmptyTitle>
EmptyDescription
Use the EmptyDescription
component to display the description of the empty state.
Prop | Type | Default |
---|---|---|
class | string |
<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 |
---|---|---|
class | string |
<EmptyContent>
<Button>Add Project</Button>
</EmptyContent>