Chat Components

Prompt Suggestions

Quiet starter-prompt list for the empty chat state — text rows with optional icons.

Open in

Installation

npx shadcn@latest add miskibin/chat-components/prompt-suggestions

Usage

"use client"

import { PromptSuggestions } from "@/components/ui/prompt-suggestions"

export function EmptyState({ onPick }: { onPick: (text: string) => void }) {
  return (
    <PromptSuggestions
      items={[
        { id: "explain", label: "Explain this repository" },
        { id: "bug", label: "Find the bug in my reducer" },
      ]}
      onSelect={(item) => onPick(item.label)}
    />
  )
}

Examples

Icons, width, and chips

icon takes any node; unsized icons are normalized to size-4 and pick up the row hover color. The list is a plain ul, so narrowing it to the composer's measure — or turning the rows into a chip row — is one className.

Notes

API reference

PromptSuggestions

items*PromptSuggestion[]
{ id?, label, icon? }. An empty array renders nothing at all.
onSelect(item: PromptSuggestion) => void
Fired when a row is clicked.
classNamestring
Merged last. The default is mx-auto w-full max-w-3xl px-3 sm:px-4 — the composer's own measure and gutters, so the rows line up under it with no override.

Data slots

Every part below is addressable from a parent, so you can restyle internals without forking the component.

prompt-suggestionsprompt-suggestion