║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Empty description: A container for displaying empty state information.

<ComponentPreview name="empty-demo" />

Installation

<CodeTabs> <TabsList> <TabsTab value="cli">CLI</TabsTab> <TabsTab value="manual">Manual</TabsTab> </TabsList> <TabsPanel value="cli">

npx shadcn@latest add @coss/empty

</TabsPanel> <TabsPanel value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="empty" title="components/ui/empty.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsPanel> </CodeTabs>

Usage

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

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <Icon />
    </EmptyMedia>
    <EmptyTitle>No data</EmptyTitle>
    <EmptyDescription>No data found</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Add data</Button>
  </EmptyContent>
</Empty>

API Reference

The API design of this component is modeled after shadcn/ui's empty component to ensure familiarity and consistency for developers already using shadcn. This standardization makes it easier to adopt coss ui while maintaining API parity with the patterns developers already know and love.

Empty

The main component of the empty state. Wraps the EmptyHeader and EmptyContent components.

| Prop | Type | Default | | ----------- | -------- | ------- | | className | string | |

<Empty>
  <EmptyHeader />
  <EmptyContent />
</Empty>

EmptyHeader

The EmptyHeader component wraps the empty media, title, and description.

| Prop | Type | Default | | ----------- | -------- | ------- | | className | 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 | | className | string | |

<EmptyMedia variant="icon">
  <Icon />
</EmptyMedia>

<EmptyMedia>
  <Avatar>
    <AvatarImage src="..." />
    <AvatarFallback>JD</AvatarFallback>
  </Avatar>
</EmptyMedia>

EmptyTitle

Use the EmptyTitle component to display the title of the empty state.

| Prop | Type | Default | | ----------- | -------- | ------- | | className | string | |

<EmptyTitle>No data</EmptyTitle>

EmptyDescription

Use the EmptyDescription component to display the description of the empty state.

| Prop | Type | Default | | ----------- | -------- | ------- | | className | 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 | | ----------- | -------- | ------- | | className | string | |

<EmptyContent>
  <Button>Add Project</Button>
</EmptyContent>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║