Follow-up prompts that stagger in after an answer, with number key shortcuts and a selected state.
import * as React from 'react'
import FollowUp, { type FollowUpItem } from '@/components/ui/follow-up'
const items: FollowUpItem[] = [
{ id: 'focus', label: 'What should I focus on first?' },
{ id: 'example', label: 'Can you show me a practical example?' },
{ id: 'compare', label: 'How does this compare to a design system?' },
]
export default function Demo() {
const [phase, setPhase] = React.useState<'loading' | 'ready' | 'selected'>('ready')
const [selected, setSelected] = React.useState<string>()
const [auto, setAuto] = React.useState(true)
React.useEffect(() => {
if (!auto && phase !== 'loading') return
const timer = setTimeout(
() => {
if (phase === 'loading') setPhase('ready')
else if (phase === 'ready') {
setSelected('example')
setPhase('selected')
} else {
setSelected(undefined)
setPhase('loading')
}
},
phase === 'loading' ? 1200 : phase === 'ready' ? 3200 : 2200,
)
return () => clearTimeout(timer)
}, [auto, phase])
return (
<div className="w-full max-w-xl space-y-4" onPointerDown={() => setAuto(false)}>
<p className="text-sm leading-6 font-[450] tracking-[-0.05px] text-muted-foreground">
A component library for agents is most useful when it covers whole workflows: approvals,
tool output, recovery, and long-running work, not just chat bubbles.
</p>
<FollowUp
items={items}
loading={phase === 'loading'}
onSelect={(item) => {
setAuto(false)
setSelected(item.id)
setPhase('selected')
}}
selectedId={selected}
/>
</div>
)
}
Part of Pasta UI — browse the full library on 21st.dev.