Accordion
Progressively reveal supporting information in place.
pnpm dlx shadcn@latest add @uiarc/accordionLive · keyboard ready
- FAQ sections where only one answer should be open at a time.
- Settings or help pages that group long content under short, scannable questions.
- Page-level FAQs that need larger type, via size="lg".
- Use expandable-card for a single standalone disclosure such as a plan or order summary.
- Use tabs when sections are peer views that people switch between.
- Use onboarding-checklist when the rows are setup tasks to complete.
Installation
Add Accordion with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/accordionAdds the component and its local dependencies, and installs @radix-ui/react-accordion, motion, lucide-react. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { Accordion } from "@/components/arc/accordion/accordion"; export function Faq() { return ( <Accordion size="lg" items={[ { title: "Can I cancel anytime?", content: "Yes. Your plan stays active until the period ends." }, { title: "Do you offer refunds?", content: "Within 14 days of purchase, no questions asked." }, ]} /> );}Accordion
A single-open, collapsible list of question and answer rows built on Radix Accordion.
PropTypeDefaultDescription
itemsRequired{ title: string; content: ReactNode }[]–Rows in order. The title is the trigger label; content fills the panel.defaultOpennumber0Index of the row open on first render. Pass -1 to start with every row closed.size"md" | "lg""md""lg" sets questions at the large text size for page-level FAQs.- EnterorSpace
- Toggles the focused row.
- ArrowDownorArrowUp
- Moves focus between row triggers.
- HomeorEnd
- Jumps to the first or last trigger.
- Radix wires aria-expanded, aria-controls, and region labelling between each trigger and panel.
- Closed panels stay mounted but switch to visibility hidden once collapsed, so they leave the accessibility tree.
- Triggers sit inside heading elements; the chevron is aria-hidden.
- Panel height springs without overshoot while the answer slides down 6px out of a subtle blur; the chevron rotates on a snappy spring.
- A toggle mid-flight retargets from the current height instead of restarting.
- Reduced motion applies the same end states in one step.
- Rows fill their container width; the lg size caps answers at 62ch for readable line length.
- Below 520px the lg size drops to a 68px row and smaller answer text with tighter right padding.
- Hover color changes apply only on hover-capable fine pointers.
- Closed panels stay mounted and hidden, so every answer is in the DOM; keep very heavy content lazy inside the panel.
- Height springs through motion on the one row that changes, with no layout observers.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for FAQs and settings groups where only one section should be open. Use expandable-card for a single standalone disclosure and tabs when sections are peers.
- Content is plain data; pass rich ReactNode answers directly. Only single mode is supported.
The full library index for assistants is at /llms.txt.
Mega menu morphProComponentA site header whose menus share one floating panel. Moving between sections morphs its size, slides the next menu in from that side and glides the caret under the new trigger, with hover intent, a safe triangle and an accordion sheet on narrow screens.Table of contents progressProComponentA table of contents that reads along with you: a line bends through the nested headings, fills as you scroll, and carries a marker to the current section, with smooth jumps and a time-left countdown.Share accessProComponentA share panel: invite people as validated email chips with suggestions, change roles from a compact menu, remove with undo, switch link access and copy the link, with every change landing in place.