Prompt Suggestions

Starter prompts for an empty chat: pills in a row, or cards in a grid.

Import

import { PromptSuggestions } from '@marbleui/ui'

Props

<PromptSuggestions>

Prop	Type	Default
items *required	`PromptSuggestion[]`	`—`
onSelect *required	`(prompt: string) => void`	`—`
className	`string`	`—`
variant	`'pills' \| 'cards'`	`'pills'`

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: React Aria Button. Follow the primitive's docs for the full keyboard map.

Usage notes

Starter prompts for an empty conversation. Render it inside ChatConversation while there are no messages, and drop it once the first one is sent; it doesn’t hide itself.

{messages.length === 0 && (
  <PromptSuggestions variant="cards" onSelect={send} items={[
    { id: 'churn', title: 'Find churn risks', description: 'Accounts with falling usage' },
    { id: 'notes', title: 'Draft release notes', description: 'From PRs merged this week', prompt: 'Group the PRs merged this week into release notes' },
  ]} />
)}

onSelect receives the prompt text (prompt, or title when there’s none), not the id, so it can go straight to your send function.
pills (default) is a wrapping row of titles. cards is a two-column grid that also shows description; pass className="grid-cols-1" in a narrow panel.
Each suggestion is a button in a list labelled “Suggested prompts”. Mark icon SVGs aria-hidden.

Example source · show

import { useState } from 'react'
import { PromptSuggestions } from './prompt-suggestions'

const I = ({ d }: { d: string }) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden><path d={d} /></svg>
)
const items = [
  { id: 'a', title: 'Summarize this week’s PRs', description: 'Group merged work into release notes', icon: <I d="M4 6h16M4 12h10M4 18h7" /> },
  { id: 'b', title: 'Find churn risks', description: 'Accounts with falling usage', icon: <I d="M3 3v18h18M7 9l4 4 4-4 5 5" /> },
  { id: 'c', title: 'Draft a launch email', description: 'For the 1.0 release', icon: <I d="M4 4h16v16H4zM4 7l8 6 8-6" /> },
  { id: 'd', title: 'Explain this error', description: 'Paste a stack trace', icon: <I d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0" /> },
]

function Demo({ variant }: { variant: 'pills' | 'cards' }) {
  const [picked, setPicked] = useState<string | null>(null)
  return (
    <div className="flex w-[30rem] flex-col gap-3">
      <PromptSuggestions items={items} variant={variant} onSelect={setPicked} />
      {picked && <span className="text-sm text-fg-muted">Sends: “{picked}”</span>}
    </div>
  )
}

export const styles = { Pills: () => <Demo variant="pills" />, Cards: () => <Demo variant="cards" /> }

Source: packages/ui/src/prompt-suggestions/prompt-suggestions.tsx

Catalog

Category: ai-agents
Priority: Pro
Primitive: composed
React Aria: TagGroup