Prompt Suggestions
betaStarter prompts for empty chat states — chips, cards or a list that rise in with a short stagger and fill the composer when clicked.
Chips
minimal
Cards with icons and refresh
Swap the set to see items leave and stagger back in.
full
Pick a card
Empty chat filling a composer
Selecting a row fills the composer and focuses it for editing.
composition
What should we work on?
Installation
npx shadcn@latest add https://kuro.abstergo.fyi/r/prompt-suggestions.jsonCopies the source into components/kura/prompt-suggestions with its dependencies (kura-theme, kura-motion, use-reduced-motion, utils). Tokens come from the kura-theme item.
When to use it
Use it for
- The empty state of a chat or agent: show 3–6 example prompts the user can start from.
- Follow-up suggestions under an answer (“Make it shorter”, “Add sources”) using the chips variant.
- Onboarding that teaches what the assistant can do, with icons and one-line descriptions.
Reach for something else when
- Commands typed inline in the prompt — use slash-command-menu.
- Global actions and navigation — use command-palette.
- More than ~8 items or anything that needs search — use command-palette or a list.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| suggestions* | readonly PromptSuggestion[] | — | Items: { id?, title, description?, icon?, prompt? }. `prompt` defaults to title + description. |
| onSelect | (prompt: string, suggestion: PromptSuggestion) => void | — | Called with the prompt text on click — typically sets the composer value. |
| variant | "chips" | "cards" | "list" | "cards" | chips = wrapping pills (titles only), cards = two-column tiles with icon and description, list = hairline-separated rows. |
| stagger | number | 0.04 | Seconds between items entering (30–50ms reads best). Capped after 8 items. |
| label | string | "Suggestions" | Accessible name of the list. |
| disabled | boolean | false | Disable every suggestion. |
All native attributes of the root element, className and ref pass through.
Anatomy
- PromptSuggestions<ul> root; data-variant = chips | cards | list.
data-slot="prompt-suggestions" - PromptSuggestionsItemEach suggestion is a native <button>; an arrow fades in on hover/focus (cards, list).
data-slot="prompt-suggestions-item" - PromptSuggestionsIconOptional icon; a 28px tile in cards.
data-slot="prompt-suggestions-icon"
Accessibility
- A labelled <ul> of native buttons; each button's name is its title (plus description).
- Icons and the hover arrow are aria-hidden.
- After filling a composer, move focus to its textarea so the user can edit and send (see the composition example).
- Reduced motion: Items fade in together-ish without rising or blurring; hover arrows and press scales do not move.
| Keys | Action |
|---|---|
| Tab / Shift+Tab | Move between suggestions |
| Enter / Space | Select a suggestion |
Notes for agents
- Give items stable `id`s; changing the array with new ids animates the swap (old items fade out, new ones stagger in).
- Keep titles under ~6 words; put detail in `description` (cards/list only — chips show the title).
- To fill a Composer: control its `value`, call setValue(prompt) in onSelect, then focus the ComposerInput ref.
- Hide the suggestions once the conversation has messages; they are an empty-state affordance.