Skip to Content
Columbus

Empty

A container for displaying empty state information.

No projects yet
Create a project to start organizing your work.

Installation

pnpm dlx shadcn@latest add @columbus/empty

Usage

import { Button } from "@/components/ui/button";
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty";
import { FolderIcon } from "lucide-react";

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <FolderIcon />
    </EmptyMedia>
    <EmptyTitle>No projects yet</EmptyTitle>
    <EmptyDescription>Create a project to get started.</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Create project</Button>
  </EmptyContent>
</Empty>;

Without variant="icon", EmptyMedia shows its content as is, so you can use a larger icon, an image, or an Avatar. Links inside EmptyDescription are underlined for you.

No results
Nothing matches your search. Try different keywords or read the docs.

API reference

This is a custom component, not a Base UI wrapper. Every part renders a <div> and accepts every native <div> attribute.

EmptyMedia

Prop

Type

On this page