Empty

Empty states with media, copy and a clear next step.

No projects yet

You have not created any projects. Create your first one to get started.

1import { Folder01Icon } from '@hugeicons/core-free-icons';
2import { HugeiconsIcon } from '@hugeicons/react';
3import { Button } from '@/components/ui/button';
4import { Empty } from '@/components/ui/empty';
5
6export function Default() {
7  return (
8    <Empty className="max-w-md">
9      <Empty.Header>
10        <Empty.Media variant="icon">
11          <HugeiconsIcon icon={Folder01Icon} size={24} />
12        </Empty.Media>
13        <Empty.Title>No projects yet</Empty.Title>
14        <Empty.Description>
15          You have not created any projects. Create your first one to get started.
16        </Empty.Description>
17      </Empty.Header>
18      <Empty.Content>
19        <Button size="sm">Create project</Button>
20        <Button size="sm" variant="outline">
21          Import
22        </Button>
23      </Empty.Content>
24    </Empty>
25  );
26}

Installation

pnpm dlx nachui add empty

Anatomy

1import { Empty } from '@/components/ui/empty';

1<Empty>
2  <Empty.Header>
3    <Empty.Media variant="icon">
4      <FolderIcon />
5    </Empty.Media>
6    <Empty.Title>No projects yet</Empty.Title>
7    <Empty.Description>Create your first project to get started.</Empty.Description>
8  </Empty.Header>
9  <Empty.Content>
10    <Button>Create project</Button>
11  </Empty.Content>
12</Empty>

Composition

Use the following composition to build an Empty:

Empty
├── Empty.Header
│   ├── Empty.Media
│   ├── Empty.Title
│   └── Empty.Description
└── Empty.Content

Variants

Outline

A dashed border frames the empty state, useful inside dense layouts where the blank area needs an edge.

No results

Nothing matched your search. Try a different term or clear the filters.

1import { Search01Icon } from '@hugeicons/core-free-icons';
2import { HugeiconsIcon } from '@hugeicons/react';
3import { Button } from '@/components/ui/button';
4import { Empty } from '@/components/ui/empty';
5
6export function Outline() {
7  return (
8    <Empty variant="outline" className="max-w-md">
9      <Empty.Header>
10        <Empty.Media variant="icon">
11          <HugeiconsIcon icon={Search01Icon} size={24} />
12        </Empty.Media>
13        <Empty.Title>No results</Empty.Title>
14        <Empty.Description>
15          Nothing matched your search. Try a different term or clear the filters.
16        </Empty.Description>
17      </Empty.Header>
18      <Empty.Content>
19        <Button size="sm" variant="ghost">
20          Clear filters
21        </Button>
22      </Empty.Content>
23    </Empty>
24  );
25}

API Reference

Empty

Prop	Type	Default	Description
`variant`	`'default' \| 'outline' \| 'card'`	`'default'`	Frame around the state: dashed border or a card
`className`	`string`	-	Additional CSS classes

Empty.Media

Prop	Type	Default	Description
`variant`	`'default' \| 'icon'`	`'default'`	`icon` wraps the child in a muted square tile
`className`	`string`	-	Additional CSS classes

Empty.Title

Prop	Type	Default	Description
`as`	`'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'`	`'h3'`	Heading level
`className`	`string`	-	Additional CSS classes

Empty.Header, Empty.Description, Empty.Content

Layout wrappers for the copy and the actions. Each accepts className.

Found something to improve?

Notice a bug, typo, or missing detail on this page? Help us make the documentation better by opening a GitHub issue.

Create an Issue

PreviousDropdown Menu

NextField