tetra-ui Logotetra ui

Empty

Displays an empty state.

empty

Installation

npx shadcn@latest add @tetra-ui/empty

Usage

import {
  Empty,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyMediaIcon,
  EmptyTitle,
} from "@repo/tetra-ui/components/empty";
import { BookOpenIcon } from "@repo/tetra-ui/components/icons";
<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <EmptyMediaIcon>
        <BookOpenIcon />
      </EmptyMediaIcon>
    </EmptyMedia>
    <EmptyTitle>No Projects Found</EmptyTitle>
    <EmptyDescription>
      You haven't created any projects yet. Get started by creating your
      first project.
    </EmptyDescription>
  </EmptyHeader>
</Empty>

On this page