Empty State

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add empty-state

Usage#

import {
  EmptyState,
  EmptyStateMedia,
  EmptyStateTitle,
  EmptyStateDescription,
  EmptyStateActions,
} from "@/components/ui/empty-state"
import { Button } from "@/components/ui/button"
import { MagnifyingGlass } from "@phosphor-icons/react/ssr"

export function Example() {
  return (
    <EmptyState>
      <EmptyStateMedia>
        <MagnifyingGlass />
      </EmptyStateMedia>
      <EmptyStateTitle>No results found</EmptyStateTitle>
      <EmptyStateDescription>
        Try adjusting your search or filters to find what you&apos;re looking for.
      </EmptyStateDescription>
      <EmptyStateActions>
        <Button variant="outline">Clear filters</Button>
      </EmptyStateActions>
    </EmptyState>
  )
}

Variants#

The variant prop colors the icon from a single semantic token. The tile around it stays neutral, with no fill and the plain border, so a search, error, or success state reads as one family across all four themes. Set it on the root and every part picks it up through context.

Density#

density retunes padding, the media and icon size, the title size, and the description measure, never color or the rounded brand corners. comfortable (the default) suits a full page or marketing surface; compact fits an in-panel placeholder. It also reads from a DensityProvider, so an app shell can set it once.

Without actions#

The action row is optional; drop EmptyStateActions for a purely informational placeholder.

FAQ#