A keyboard-driven next step picker with numbered options and a free text custom question.
import * as React from 'react'
import FollowUpSuggestions, {
type FollowUpSuggestion,
} from '@/components/ui/follow-up-suggestions'
const items: FollowUpSuggestion[] = [
{ id: 'architecture', label: 'Explain the recommended architecture' },
{ id: 'priorities', label: 'Prioritize the first release' },
{ id: 'compare', label: 'Compare the strongest libraries' },
{
id: 'custom',
label: 'Ask a different question',
custom: true,
placeholder: 'What else should I look into?',
},
]
export default function Demo() {
const [selected, setSelected] = React.useState(items[1].id)
const [auto, setAuto] = React.useState(true)
const [sent, setSent] = React.useState('')
React.useEffect(() => {
if (!auto) return
const index = items.findIndex((item) => item.id === selected)
const timer = setTimeout(
() => setSelected(items[(index + 1) % items.length].id),
index === items.length - 1 ? 2600 : 1400,
)
return () => clearTimeout(timer)
}, [auto, selected])
return (
<div
className="w-full max-w-lg space-y-3"
onKeyDown={() => setAuto(false)}
onPointerDown={() => setAuto(false)}
>
<FollowUpSuggestions
items={items}
onDismiss={() => setSent('Dismissed')}
onSelect={(id, value) =>
setSent(
value ? `Asked: ${value}` : `Selected: ${items.find((item) => item.id === id)?.label}`,
)
}
onSelectedIdChange={setSelected}
selectedId={selected}
/>
<output aria-live="polite" className="block min-h-5 text-xs leading-5 text-muted-foreground">
{sent}
</output>
</div>
)
}
Part of Pasta UI — browse the full library on 21st.dev.