Cognition

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.

Proposed. fe-distillery has no first-class empty-state component yet. This documents the canonical Empty the audit recommends: 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 Cognition 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). 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/ui/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 Cognition tokens.

Proposed canonical component: fe-distillery has no empty-state primitive yet. The parts compose as Empty (EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent), built on Cognition tokens.