Build · New

Accordion

Questions that open to show their answers, so long help and settings pages stay short. People open only what they need.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/accordion

Dependencies it brings: @base-ui/react, @phosphor-icons/react

Usage

import { Accordion, AccordionItem } from "@/components/ui/accordion";

<Accordion divider>
  <AccordionItem value="refund" question="How long does a refund take?">
    Most refunds reach your account within five working days.
  </AccordionItem>
</Accordion>

Examples

One at a time

multiple={false}: opening one section closes the other. Fine for settings; in a FAQ let several stay open, since people compare answers.

Mobile, icon at the start

breakpoint="mobile" sets body-16 questions and an 8px gap; iconPosition="start" puts the icon before the question. Both are set on the stack, so no item differs. The default, auto, is Mobile below md and Desktop above.

Opened from a link

Start closed and open the item a link points to by controlling value. Find-in-page also opens a closed answer that holds the text: search for IBAN.

API reference

Accordion

Prop	Type	Default	Description
`multiple`	`boolean`	`true`	Several items open at once; `false` for one.
`defaultValue`	`string[]`		Items open at first.
`value / onValueChange`	`string[]`		Controls which items are open.
`breakpoint`	`"auto" \| "desktop" \| "mobile"`	`"auto"`	Figma's Breakpoint, for the whole stack.
`iconPosition`	`"end" \| "start"`	`"end"`	Figma's Icon position, for the whole stack.
`divider`	`boolean`	`false`	Figma's Divider: a line above each item.

AccordionItem

Prop	Type	Default	Description
`question`	`ReactNode`		Figma's Question: a button inside a heading.
`children`	`ReactNode`		Figma's Answer: a short paragraph, a list or a link.
`value`	`string`		The item's key in `value`.
`id`	`string`		For `#` links to the item.
`icon`	`boolean`	`true`	Figma's Icon: the plus / minus icon.
`headingLevel`	`2 \| 3 \| 4 \| 5 \| 6`	`3`	The heading level around the question.
`disabled`	`boolean`	`false`	Stops it opening or closing.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	From question to question, and into the links of an open answer.
`EnterSpace`	Opens or closes the question; focus stays on it.

ARIA

Each question is a button inside a heading (h3 by default), so screen readers jump between questions and hear whether each is open.
The button has aria-expanded and aria-controls pointing at the answer region. The plus / minus icon is decorative.
The whole question row is the button, with a touch area of at least 48px.
Opening and closing take 200ms, and are instant under reduced motion.

Arabic and RTL notes

Mirrors

The question and answer start on the right, and the icon sits at the inline end: the left.
iconPosition="start" puts the icon on the right in Arabic.

Does not mirror

The plus and minus icons are symmetric, so nothing in them mirrors.

Numerals: Amounts and times in answers read left to right; format numbers with formatNumber.
Arabic typography: Questions body-18 Medium (Mobile body-16), answers body-16. Arabic lines are taller, so rows grow rather than clip.
Mixed-direction text: Write Arabic questions the way people ask them in Arabic, not word-for-word translations.

All components ›