Design6 min
Designing motion that feels inevitable
Springs, easing and the small details that make an interface feel alive instead of animated.
Sep 28Read
Search
Search components and blocks
FAQ Blocks
Answer the objections before they become support tickets.
FAQ Morph
Open pageA two-column FAQ with a heading and a support link beside the questions. The questions sit in a rounded tray as filled pills; the open one lifts onto a lighter card that morphs from question to question, with one surface sliding and resizing to whichever is open instead of each item growing its own box. The answer unblurs into view as its height opens, and the plus turns into a cross. Click the open one to close it. Sample copy is for Relay, a fictional API monitor.
FAQ
Questions, answered.
The things people ask before they set up their first monitor. Anything else, we reply within a day.
Talk to supportEvery 30 seconds on paid plans and every 5 minutes on Free. A failing check is retried from a second region before anyone is paged, so a single network blip never wakes you up.
Install
$ pnpm dlx shadcn@latest add @ditherui/faq-morph
Props
PropTypeDefault
items{ id: string; question: string; answer: string }[]five sample questionsdefaultOpenIdstring—classNamestring—