Stalk UI

Component

EmptyState

Communicates an empty view with an icon, message, and next-step actions.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/empty-state

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<EmptyState.Root>
  <EmptyState.Icon>
    <Inbox />
  </EmptyState.Icon>
  <EmptyState.Title>No devices found</EmptyState.Title>
  <EmptyState.Description>Try widening the date range or clearing filters.</EmptyState.Description>
  <EmptyState.Actions>
    <Button size="sm">Clear filters</Button>
  </EmptyState.Actions>
</EmptyState.Root>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`size``EmptyStateSize`No--

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

VariantValues
`size``sm`, `md`

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/empty-state.json`
  • Recipe: `emptyState`
  • Files: `src/components/ui/empty-state.tsx`