EmptyState

An intentional placeholder for spaces waiting to be filled.

EmptyState marks a space as waiting to be filled, not missing: a dashed hairline, a title naming what’s absent, a supporting line explaining how it fills, and the shortest-path action. The dashboard grid, checkpoint timeline, and usage panel all reuse it, and AgentChat composes the bare variant for its idle timeline.

No apps yet

Describe what you want to build and the agent scaffolds it with a Neon database attached.

import { Button } from "@/components/ui/button";

import { EmptyState } from "./empty-state";
import { emptyStates } from "./fixtures";

export const EmptyStateDemo = () => (
  <EmptyState
    action={<Button size="sm">{emptyStates.apps.actionLabel}</Button>}
    className="w-full max-w-md"
    description={emptyStates.apps.description}
    title={emptyStates.apps.title}
  />
);

export default EmptyStateDemo;

Install

npx shadcn@latest add https://ui.neon.com/r/empty-state.json

Usage

import { EmptyState } from "@/components/neon-ui/empty-state";

<EmptyState
  title="No apps yet"
  description="Describe what you want to build and the agent scaffolds it."
  action={<Button>Create your first app</Button>}
/>;

Wiring to Neon

The typed example guards a project grid over GET /projects: children render when the tenant has projects, the empty state (with a create action) when the list is empty.

Props

PropType

titleReactNode

One line naming what's missing.

TypeReactNode

description?ReactNode

Supporting line explaining how the space fills.

TypeReactNode

icon?ReactNode

Replace the faded Neon mark, e.g. with an icon.

TypeReactNode

action?ReactNode

Call to action, e.g. a Button.

TypeReactNode

variant?"panel" | "bare"

panel draws the dashed frame and stripes; bare drops both for embedding inside bordered surfaces.

Type"panel" | "bare"

Default"panel"

size?"sm" | "md" | "lg"

Vertical breathing room.

Type"sm" | "md" | "lg"

Default"md"

Accessibility

The mark and stripes are decorative (aria-hidden); the state is conveyed entirely by the visible text. The action slot takes any focusable element and sits last in the reading order.