Folio

Components

Empty State

A centered placeholder for empty lists, searches, and first-run screens. Use it to explain why there's nothing here and offer the next action.

Canonical. This documents the Empty component from toolkit-ui: a header, media, title, description, and content composition.

Preview

No projects yet
Create your first project to start collecting traces and evaluations.

Rendered with live Folio tokens: the muted media well, text, and buttons remap on theme change, no dark: classes.

API

No projects yet
Create your first project to get started.
<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <Folder />
    </EmptyMedia>
    <EmptyTitle>No projects yet</EmptyTitle>
    <EmptyDescription>
      Create your first project to get started.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Create project</Button>
  </EmptyContent>
</Empty>

EmptyMedia takes a variant (default for a bare icon or illustration, icon for the muted rounded well) and a color (default or destructive for an error state). EmptyContent is optional: drop it for a purely informational state.

Examples

No results found
No traces match your filters. Try another term.
This folder is empty
Items you add will appear here.

The left state nests an Input in EmptyContent; the right is informational only, sitting in a dashed well: a common pattern for drop targets.

Don't and Do

Don't

Don't leave a blank area or a bare “No data” string: and don't hardcode bg-gray-50 for the media well. Explain the state and offer a way forward.

Do
// Offer the next action right in the empty state
<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon"><Inbox /></EmptyMedia>
    <EmptyTitle>No messages</EmptyTitle>
  </EmptyHeader>
  <EmptyContent>
    <Button>Compose</Button>
  </EmptyContent>
</Empty>
import {
  Empty,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
  EmptyDescription,
  EmptyContent,
} from "@/components/shadcn/empty";

export function NoResults() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <Search />
        </EmptyMedia>
        <EmptyTitle>No results found</EmptyTitle>
        <EmptyDescription>Try a different search term.</EmptyDescription>
      </EmptyHeader>
    </Empty>
  );
}

Drop-in ready. Compose only the parts you need: every piece is plain markup styled with Folio tokens.

API matches the toolkit-ui Empty component. The parts compose as Empty (EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent), built on Folio tokens.