EmptyState

Tweak props live and copy the generated JSX snippet.

<EmptyState
  icon={<Inbox className="size-6" />}
  title="No simulations yet"
  description="Create your first sim from the Builder."
  actions={[
    { label: "New simulation", icon: <Plus className="size-3.5" />, onClick: handleClick },
    { label: "Learn more", iconRight: <ArrowRight className="size-3.5" />, to: "/builder" },
  ]}
/>

Live view of the validated pg* search params after Zod parsing and safe-fallback coercion. Tamper with the URL — any invalid value snaps back to its default here.

Wrap an empty screen in EmptyState. Provide title, an optional description, and one or more actions. The first action defaults to the primary button variant; subsequent actions default to outline.

<EmptyState
  icon={<Inbox className="size-6" />}
  title="No simulations yet"
  description="Create your first sim from the Builder."
  actions={[
    { label: "New simulation", icon: <Plus className="size-3.5" />, onClick: create },
    { label: "Learn more", iconRight: <ArrowRight className="size-3.5" />, to: "/docs" },
  ]}
/>

Set variant on any action to override the default. The first action uses "default" (filled primary) unless you override it; every other action uses "outline". Supported variants come from the shadcn Button preset: default, secondary, outline, ghost, destructive, and link.

actions={[
  { label: "Create file", icon: <FilePlus className="size-3.5" />, onClick: create },
  { label: "Import", variant: "secondary", onClick: importFile },
  { label: "Learn more", variant: "ghost", iconRight: <ArrowRight className="size-3.5" />, to: "/docs" },
]}

Pass icon to render a leading icon before the label. Icons are automatically marked aria-hidden="true" so they do not pollute the accessible name.

actions={[
  {
    label: "Clear filters",
    icon: <RotateCcw className="size-3.5" />,
    onClick: clearFilters,
  },
]}

Pass iconRight for a trailing icon after the label. This is useful for CTAs that imply navigation, such as “Go to docs” or “Browse templates”.

actions={[
  {
    label: "Go to docs",
    iconRight: <ArrowRight className="size-3.5" />,
    to: "/docs",
  },
]}

Use to instead of onClick to render a TanStack Link. The component renders a single <a> element (no nested button) so right-click/open-in-new-tab works naturally. The accessible name is derived from the label, ariaLabel, or title.

actions={[
  { label: "New simulation", icon: <Plus className="size-3.5" />, to: "/builder" },
  { label: "Browse templates", iconRight: <ArrowRight className="size-3.5" />, variant: "outline", to: "/templates" },
]}

Add compact for tighter padding and smaller buttons. Use this inside panels, cards, or sidebars where the full empty-state treatment would feel heavy.

<EmptyState
  compact
  title="No alerts"
  actions={[{ label: "Add", icon: <Plus className="size-3.5" />, onClick: addAlert }]}
/>