Empty
A container for displaying empty state information.
Empty composes a header, optional icon media, title and description with an
action area. EmptyMedia stacks two scaled copies behind its icon variant, and
every part marks itself with data-slot.
Installation
npx shadcn@latest add @kosori/emptyExample
empty-example.tsx
No upcoming meetings
Create a meeting to get started.
import { IconBook, IconRoute } from '@tabler/icons-react';
import { Button } from '@/components/ui/button';
import {
Empty,
EmptyContent,
EmptyDescription,
EmptyHeader,
EmptyMedia,
EmptyTitle,
} from '@/components/ui/empty';
const EmptyExample = () => (
<Empty>
<EmptyHeader>
<EmptyMedia variant='icon'>
<IconRoute />
</EmptyMedia>
<EmptyTitle>No upcoming meetings</EmptyTitle>
<EmptyDescription>Create a meeting to get started.</EmptyDescription>
</EmptyHeader>
<EmptyContent>
<div className='flex gap-2'>
<Button size='sm'>Create meeting</Button>
<Button size='sm' variant='outline'>
<IconBook />
View docs
</Button>
</div>
</EmptyContent>
</Empty>
);
export default EmptyExample;
Usage
import {
Empty,
EmptyDescription,
EmptyHeader,
EmptyTitle,
} from '@/components/ui/empty';
const EmptyDemo = () => (
<Empty>
<EmptyHeader>
<EmptyTitle>No upcoming meetings</EmptyTitle>
<EmptyDescription>Create a meeting to get started.</EmptyDescription>
</EmptyHeader>
</Empty>
);Variants
| Part | Prop | Values |
|---|---|---|
EmptyMedia | variant | default, icon |