Accordion
Stacked, collapsible sections that show one panel's content at a time (or several).
@garn/ui/accordionDefault
Single-open FAQ accordion.
Installation
garn is copy-in — the garn CLI writes this component's source into your project, so you own and can edit it. It resolves any base files and installs the npm dependencies below for you.
npx garn-ui add accordion- Registry
accordion- Source
- accordion.tsx
- Deps
@radix-ui/react-accordionlucide-react- Registry deps
utils
Import
import { Accordion } from "@garn/ui/accordion";Props
Generated from the component's TypeScript types.
No component-specific props — this is a thin wrapper over its native element.
Styling
Target these data-slots and remap these tokens to restyle without forking the component.
[data-slot="accordion"]| Property | Token | Tier |
|---|---|---|
triggerMinHeight | --garn-control-h-lg | semantic · air |
chevronMotion | --garn-motion-fast | semantic |
Overview
Accordion lets users expand and collapse stacked sections to manage long content — FAQs, settings groups, nested details. Accordion sets type (single for one-open-at-a-time, multiple for independent toggles); each AccordionItem pairs an AccordionTrigger header with a collapsible AccordionContent. Use it to tame a long single page; for switching between peer views use Tabs, and for one isolated show/more region use Collapsible.
Guidelines
Reach for an accordion only when content is genuinely long. Collapsing a handful of short items adds clicks for no gain — show them outright. It shines when scanning headers first, then drilling into one section, is the natural flow (an FAQ).
Choose single vs multiple deliberately. single keeps focus on one section and a tidy page; multiple lets users compare sections side by side. Write headers that summarize their panel so the collapsed list is itself scannable.
Keep triggers as headings and don't hide essentials. The trigger sits in a real heading for navigation, and aria-expanded reflects state — don't bury required form fields or critical info inside a collapsed panel a user might never open.
Best practices
- Give every AccordionItem a unique
value. - Use
type="single" collapsiblefor FAQ-style one-at-a-time;type="multiple"when several can stay open. - Put the trigger text in the heading so it reads as a real section header.
- Don't nest the primary navigation in an accordion — it hides wayfinding.
- Don't use an accordion when all content should be visible at once.
Content guidelines
- Write section headers as short, scannable labels or questions (“Shipping & returns”).
- Keep headers parallel in phrasing and length so the stack reads as one set.
- Front-load the header with the keyword users scan for.
Accessibility
- Role
button- ARIA APG
- accordion
- Focus
- Trigger shows a focus ring; reduced-motion softens the expand/collapse.
Keyboard
| EnterSpace | Toggle the focused section. |
| Tab | Move between triggers and into open content. |
- • Each trigger is a <button> inside a heading; aria-expanded + aria-controls link it to its panel.
- Status
- Stable
- Version
v0.3.0- Introduced
v0.1.0
garn doesn't yet record a per-release version history. This reflects the component's current lifecycle state; full changelog entries will appear once the metadata pipeline emits a lifecycle.history field.