Suggestions

A horizontally scrollable row of prompt chips for an empty state. Each chip is a small embossed key — it's pressable, so it is a Button, never a hand-rolled chip.

Pick a suggestion above.

tsx

"use client"

import * as React from "react"

import { Suggestion, Suggestions } from "@/registry/seam/ui/suggestions"

const PROMPTS = [
  "Explain springs vs durations",
  "What is the debossed rule?",
  "Show me a composer",
  "How does reduced motion work?",
]

export default function SuggestionsDemo() {
  const [picked, setPicked] = React.useState<string | null>(null)

  return (
    <div className="w-full max-w-md space-y-3">
      <Suggestions>
        {PROMPTS.map((p, i) => (
          <Suggestion key={p} index={i} onClick={() => setPicked(p)}>
            {p}
          </Suggestion>
        ))}
      </Suggestions>
      <p className="text-muted-foreground text-sm">
        {picked ? `Picked: ${picked}` : "Pick a suggestion above."}
      </p>
    </div>
  )
}

bunx --bun @seamui/cli@latest add suggestions

Notes

Pass index to opt into a staggered entrance — each chip rises on springs.snappy a beat after the last. Under reduced motion the stagger drops and each chip simply fades in.
Chips are native Buttons — focusable and activatable — with press feedback inherited from Button; the row is reachable in tab order and arrow-scrollable.
The scrollbar is hidden visually but the row still scrolls; there is deliberately no edge-fade mask, so focus rings on the first and last chips are never clipped.

Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.