Empty

Shows that there's nothing here yet, and what to do about it.

No Projects Yet

You haven't created any projects yet. Get started by creating your first project.

<Empty>  <EmptyHeader>    <EmptyMedia variant="icon">      <HugeiconsIcon icon={Folder01Icon} />    </EmptyMedia>    <EmptyTitle>No Projects Yet</EmptyTitle>    <EmptyDescription>      You haven&apos;t created any projects yet. Get started by creating your      first project.    </EmptyDescription>  </EmptyHeader>  <EmptyContent>    <Button variant="primary">Create Project</Button>  </EmptyContent></Empty>

Installation

$ npx shadcn@latest add @constella/empty

Usage

import {  Empty,  EmptyContent,  EmptyDescription,  EmptyHeader,  EmptyMedia,  EmptyTitle,} from "@/components/primitives/empty";

<Empty>  <EmptyHeader>    <EmptyMedia variant="icon">      <HugeiconsIcon icon={Folder01Icon} />    </EmptyMedia>    <EmptyTitle>No data</EmptyTitle>    <EmptyDescription>No data found</EmptyDescription>  </EmptyHeader>  <EmptyContent>    <Button>Add data</Button>  </EmptyContent></Empty>

Composition

Empty├── EmptyHeader│   ├── EmptyMedia│   ├── EmptyTitle│   └── EmptyDescription└── EmptyContent

Empty Media

Use variant="icon" on EmptyMedia to set an icon on a fill tile. Leave the default to show anything else, like an avatar.

Variant	Shows
`default`	Its children as they are
`icon`	A 32px `fill` tile

Empty Content

Put the way out in EmptyContent, like clearing a search that found nothing. An empty state draws no box; give it a dashed edge with sx to mark a place waiting for content.

No files match “zzz”

Check the spelling, or search everything.

<Empty sx={styles.dashed}>  <EmptyHeader>    <EmptyTitle>No files match “{query}”</EmptyTitle>  </EmptyHeader>  <EmptyContent>    <Button onClick={() => setQuery("")}>Clear search</Button>  </EmptyContent></Empty>

Card

Put an empty state in a Card to hold a section's place.

No Notifications

You're all caught up. New notifications will appear here.

<Card>  <Empty>    <EmptyHeader>      <EmptyTitle>No Notifications</EmptyTitle>    </EmptyHeader>  </Empty></Card>

Avatar

Put an Avatar in EmptyMedia.

User Offline

This user is currently offline. You can leave a message to notify them or try again later.

<EmptyMedia>  <Avatar size="lg">    <AvatarImage alt="" src="/avatars/shadcn.png" />    <AvatarFallback>CN</AvatarFallback>  </Avatar></EmptyMedia>

API Reference

Part	Adds
`EmptyMedia`	`variant`: `"default"` or `"icon"`
`EmptyTitle`	`render`, to make it a heading: `render={<h3 />}`

Every part takes sx, applied last, and renders a div. For render, see Base UI useRender.