Hewn
Components

Components

Empty

Status region for lists and tables with nothing to show.

stablefree

Install

@hewnui/ui · hewnui

Terminal
npm install @hewnui/ui
Terminal
pnpm add @hewnui/ui
Terminal
yarn add @hewnui/ui
Terminal
bun add @hewnui/ui
Terminal
npx hewnui@latest add empty

Empty tells people the region is intentional, not broken. Pair it with an action when they can populate it.

No jobs in this window

Routed work will land here. Filters apply to this desk only.

Usage

TSX
import { Button, Empty } from "@hewnui/ui";

<Empty title="No jobs" action={<Button>Queue deploy</Button>}>
  Routed work will land here.
</Empty>

Accessibility

  • Renders role="status" so a newly empty region is announced
  • title is the name of the state; supporting copy is optional
  • Keep the action a real control (Button, Link) — do not put the only next step in placeholder art

API reference

Props for Empty from @hewnui/ui/empty. Generated from component types — not hand-written.

Prop

Type

Card

Elevated panel with optional header, body, and footer.

CommandPalette

Modal ⌘K command finder with grouped actions, shortcuts, and async loading.

On this page

UsageAccessibility