For AI agents: the documentation index is at /llms.txt, and any docs page is available as Markdown by appending .md to its URL.

Empty

An empty state with media, a title, a description, and actions.

No projects yet

Projects group your invoices, expenses, and time. Create one to get started, or import them from a spreadsheet.

When to use

Use when: A list, table, or page has nothing to show yet, and people need to know what to do next.
Avoid when: The content is still loading; use Skeleton or Spinner.

Installation

bunx shelf add empty

The source lands in src/components/ui/empty.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Empty from "@/components/ui/empty";
import { Button } from "@/components/ui/button";

<Empty.Root>
  <Empty.Header>
    <Empty.Media variant="icon"><SearchIcon /></Empty.Media>
    <Empty.Title>No invoices yet</Empty.Title>
    <Empty.Description>Invoices you send appear here.</Empty.Description>
  </Empty.Header>
  <Empty.Content>
    <Button>Create invoice</Button>
  </Empty.Content>
</Empty.Root>

Built on

Packages: @stylexjs/stylex
Shelf items: foundations, utils
Figma: Optional native Figma library. See Designers.