Empty state

The first screen of a chat: a greeting, one line, the composer and up to four suggestions. No illustration.

Markdown

On this page

Greeting, composer and four starters.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/empty-state.json

Usage

tsx

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

<EmptyState
  title="Good evening, Daniel"
  description="Ask about the web app, or hand over a task."
  composer={<PromptInput />}
  suggestions={[{ label: "Fix the failing test" }, { label: "Explain the auth flow" }]}
  onSuggestion={(prompt) => setDraft(prompt)}
/>

Filling the composer with a suggestion, rather than sending it, lets people adjust it first.

Examples

Top aligned

For an agent with a clear set of jobs, suggestions become rows.

An agent with a clear set of jobs.

Props

Prop	Type	Notes
`title`	`ReactNode`	The greeting
`description`	`ReactNode`	One line
`composer`	`ReactNode`	Rendered between the greeting and the suggestions
`suggestions`	`{ label, prompt?, icon? }[]`	Up to four. More are ignored
`onSuggestion`	`(prompt) => void`
`align`	`"center" \| "top"`	Defaults to `center`

Accessibility

The greeting is a heading. Suggestions are buttons in a labeled group.

Motion

The greeting fades up 4 px over 300 ms, once. Suggestions stagger in 40 ms apart, once.
Under reduced motion both only fade.