GitHub

Go to...

Choose a page to open.

Displays a message and actions when there is no content to show.

Empty

empty-demo

Installation

pnpm dlx shadcn@latest add https://ui.n2020.com/r/empty.json

Usage

import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty";
<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <FolderOpenIcon />
    </EmptyMedia>
    <EmptyTitle>No projects yet</EmptyTitle>
    <EmptyDescription>Create a project to start.</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Create project</Button>
  </EmptyContent>
</Empty>

Examples

Outline

Add the border class to draw a dashed outline.

empty-outline