Search
Search components and blocks
FAQ Accordion
ProA dark, icon-led variant for support/FAQ sections — each row's icon pops up, tilts, and shifts to full color when its row opens, the trailing indicator morphs from a plus into a minus instead of rotating a chevron, and the open row's question bolds up while its answer blurs into focus and indents to sit under the question text rather than the icon.
Grab an API key from your dashboard and follow the quickstart — most teams are making their first call in under five minutes.
Yes. Fine-tune on your own data, or steer responses per-request with system prompts and temperature controls.
All traffic is encrypted in transit and at rest, and your data is never used to train shared models.
You'll get a heads-up at 80% usage. Requests queue briefly past the limit instead of failing outright.
Yes, start with a 14-day free trial with full access to all features. No credit card required, and you can upgrade or cancel anytime.
Props
PropTypeDefault
Leading iconeach question ships its own icon; it pops up, tilts, and shifts to full foreground color when its row opens, and nudges on hover—valuestring—defaultValuestringlast questiononValueChange(value: string) => void—Indicatora plus that morphs into a minus (two bars, the vertical one scales away) instead of a rotating chevron—Active questionbolds to full foreground color while its answer is open—Answer revealcontent blurs in from 6px alongside the height/opacity spring, instead of just fading—Answer alignmentindented to line up under the question text, not the icon—classNamestring—When to use the accordion
Use an accordion to keep long content scannable: FAQs, settings groups, step details. Items expand with a spring, and this page includes a FAQ accordion and a bouncy variant.
Run the shadcn CLI with the DitherUI accordion name. It is built on Radix, so each item is keyboard accessible.