ComponentsNavigation

Accordion

Collapsible sections for FAQs, policy pages, editor side panels and the mobile menu. Single or multiple open, three variants, header summaries and actions.

Radix Accordion components/accordion.tsxtheme · material · accent · density · font

Annual plans can be refunded within 30 days. The amount goes back to the original card within 5–10 business days.

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@vamos-ui/react";

<Accordion type="single" collapsible>
  <AccordionItem value="refunds">
    <AccordionTrigger>How do refunds work?</AccordionTrigger>
    <AccordionContent>…</AccordionContent>
  </AccordionItem>
</Accordion>

Keyboard: Enter / Space toggles, ↑ ↓ move between headers, Home / End jump to the first / last.

Examples

Variants (HR policies)

plain is a ruled list, separated boxes each item, card puts them in one panel.

plain

20 working days per calendar year, plus public holidays. Up to 5 days carry over to the next year.

separated

20 working days per calendar year, plus public holidays. Up to 5 days carry over to the next year.

card

20 working days per calendar year, plus public holidays. Up to 5 days carry over to the next year.

Editor side panel (CMS)

meta summarises a closed section and is part of its name; actions sit beside the toggle as separate controls. Disabled items stay visible.

Goes live Nov 14, 2026 · 09:00

Visibility: public · Author: Elif Kaya

Meta description is 182 characters — keep it under 160.

Add alt text to 1 image.

Remember open sections

Control value and store it — here in localStorage, so the panel reopens the way the user left it.

laura.callahan@northwind.example · +44 20 7946 0958

API

Accordion

PropTypeDefault
type
Required. One open section, or any number.
"single" | "multiple"—
collapsible
single: allow closing the open section.
booleanfalse
value · defaultValue
Open section(s); string for single, array for multiple.
string | string[]—
onValueChange
Called when sections open or close.
(value) => void—
variant
Ruled list, boxed items, or one panel.
"plain" | "separated" | "card""plain"
size
sm for side panels.
"sm" | "md""md"
headingLevel
Heading that wraps each trigger, to fit the page outline.
2 | 3 | 4 | 5 | 63
disabled
Locks every section.
booleanfalse

AccordionItem

PropTypeDefault
value
Required. Identifies the section.
string—
disabled
Locks this section.
booleanfalse

AccordionTrigger

PropTypeDefault
icon
Leading icon.
ReactNode—
meta
Summary at the end of the header ("3 selected"); included in the button's name.
ReactNode—
actions
Controls beside the toggle (outside the button).
ReactNode—

AccordionContent

PropTypeDefault
forceMount
Keep the content mounted while closed.
true—
className
Applied to the inner padded box (the outer element animates height).
string—
Next
Activity timeline