Prompt Suggestion

One-tap suggestion chips that seed the prompt composer with starter prompts.

PromptSuggestion chips sit above or beside the composer and insert a starter prompt on click. Use PromptSuggestions for a scrolling row or a wrapping grid.

<PromptSuggestions>
  {prompts.map((prompt) => (
    <PromptSuggestion
      key={prompt}
      suggestion={prompt}
      active={active === prompt}
      onClick={setActive}
    />
  ))}
</PromptSuggestions>

Installation

pnpm dlx cubix@latest add prompt-suggestion

Usage

Import

import {
  PromptSuggestion,
  PromptSuggestions,
} from "@/components/cubix/prompt-suggestion"

Example

<PromptSuggestions>
  <PromptSuggestion
    suggestion="Summarize the deploy checklist"
    onClick={setPrompt}
  />
</PromptSuggestions>

Composition

PromptSuggestions
├── PromptSuggestion
└── PromptSuggestionsEmpty

Features

Horizontal scroll or wrap layouts for starter prompts
Active, disabled, icon, and loading chip states
Works with PromptInputProvider to seed the composer

With icons

<PromptSuggestion suggestion="Improve this prompt" onClick={setPrompt}>
  <WandSparklesIcon data-icon="inline-start" />
  Improve this prompt
</PromptSuggestion>

Active

<PromptSuggestion suggestion="Selected plan" active />

Disabled

<PromptSuggestion suggestion="Unavailable" disabled />

Empty

No starter prompts for this workspace yet.

<PromptSuggestionsEmpty>
  No starter prompts for this workspace yet.
</PromptSuggestionsEmpty>

Horizontal scroll

Overflowing chips scroll sideways without a visible scrollbar.

<PromptSuggestions>
  {manyPrompts.map((prompt) => (
    <PromptSuggestion key={prompt} suggestion={prompt} />
  ))}
</PromptSuggestions>

Wrap

<PromptSuggestions orientation="wrap">
  ...
</PromptSuggestions>

Loading

<PromptSuggestions aria-busy="true">
  <Skeleton className="h-8 w-28 rounded-full" />
  ...
</PromptSuggestions>

Variants

<PromptSuggestion variant="outline" />

With Prompt Input

Pair with PromptInputProvider so a chip can fill the textarea.

<PromptSuggestion
  suggestion={prompt}
  onClick={(value) => controller.textInput.setInput(value)}
/>

Empty conversation

How can I help?

Choose a starter prompt to seed the composer.

<PromptSuggestions orientation="wrap" className="justify-center">
  ...
</PromptSuggestions>

API Reference

PromptSuggestions

Prop	Type	Default	Description
orientation	"horizontal" \| "wrap"	"horizontal"	horizontal scrolls chips in one row; wrap flows chips onto multiple lines.
children	React.ReactNode	-	PromptSuggestion chips or loading skeletons.
className	string	-	Additional classes for the suggestions row.

PromptSuggestion

Prop	Type	Default	Description
suggestion	string	-	Prompt text passed to onClick. Also used as the label when children are omitted.
onClick	(suggestion: string) => void	-	Called with the suggestion string when the chip is pressed.
active	boolean	false	Marks the chip as selected and sets aria-pressed.
disabled	boolean	-	Prevents selection while keeping the chip visible.
variant	Button variant	"outline"	Visual style forwarded to Button.
size	Button size	"sm"	Chip size forwarded to Button.
children	React.ReactNode	-	Optional custom content such as an icon plus label. Defaults to suggestion.

PromptSuggestionsEmpty

Prop	Type	Default	Description
children	React.ReactNode	"No suggestions yet."	Empty-state copy shown when no chips are available.
className	string	-	Additional classes for the empty surface.