# Chat Welcome

> The empty state of a new chat: a greeting, the prompt input and suggestion buttons that start a conversation in one click.

A shadcn/ui block from the [@sortui](https://sortui.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/sortui/chat-welcome-01).

- Page, with a live preview: https://shadcn.exchange/r/sortui/chat-welcome-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/sortui/chat-welcome-01-light-813b58529c9333f5.png
- Registry item: https://sortui.dev/r/chat-welcome-01.json
- Categories: ai
- Listed: 2026-10-23, source last changed 2026-10-23

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/sortui/chat-welcome-01.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `cn`, `lucide-react`
- Registry items: `@sortui/button`, `@sortui/prompt-input-01`

## Files

### `registry/blocks/chat-welcome-01/components/chat-welcome.tsx`

```tsx
"use client"

import * as React from "react"
import {
  ChartColumnIcon,
  FileTextIcon,
  ListChecksIcon,
  MailIcon,
} from "lucide-react"
import { cn } from "cn"

import { Button } from "@/components/ui/button"
import {
  PromptInput,
  type PromptSubmission,
} from "@/registry/blocks/prompt-input-01/components/prompt-input"

export type ChatSuggestion = {
  label: string
  prompt: string
  icon: React.ComponentType
}

export const chatSuggestions: ChatSuggestion[] = [
  {
    label: "Summarize feedback",
    prompt: "Summarize this week's customer feedback into the top five themes.",
    icon: FileTextIcon,
  },
  {
    label: "Analyze a funnel",
    prompt:
      "Where do new users drop off between sign-up and their first project?",
    icon: ChartColumnIcon,
  },
  {
    label: "Plan a sprint",
    prompt: "Turn these feature requests into a two-week sprint plan.",
    icon: ListChecksIcon,
  },
  {
    label: "Write an email",
    prompt: "Write a short email announcing dark mode to our beta users.",
    icon: MailIcon,
  },
]

export function ChatWelcome({
  greeting = "What can I help with?",
  suggestions = chatSuggestions,
  onSubmit,
  autoFocus,
  className,
}: {
  greeting?: string
  suggestions?: ChatSuggestion[]
  onSubmit?: (submission: PromptSubmission) => void
  autoFocus?: boolean
  className?: string
}) {
  return (
    <div
      className={cn(
        "mx-auto flex w-full max-w-3xl flex-col items-center gap-8 px-4",
        className
      )}
    >
      <h1 className="text-center text-3xl font-semibold text-balance">
        {greeting}
      </h1>
      <PromptInput onSubmit={onSubmit} autoFocus={autoFocus} />
      <div className="flex flex-wrap justify-center gap-2">
        {suggestions.map(({ label, prompt, icon: Icon }) => (
          <Button
            key={label}
            variant="outline"
            size="sm"
            onClick={() => onSubmit?.({ text: prompt, files: [], tool: null })}
          >
            <Icon data-icon="inline-start" />
            {label}
          </Button>
        ))}
      </div>
    </div>
  )
}
```