Accordion

A stack of collapsible sections. Each header is a real button inside a heading, which is what makes the set navigable by heading in a screen reader.

src/components/ui/accordion.tsx

About

From the component's own source, where it was written.

A stack of collapsible sections.

type="single" closes the previous section when another opens; "multiple" lets any number stand open. Each header is a real <button> inside a heading, which is what makes the set navigable by heading in a screen reader.

Install

npx astralyx-ui add accordion

Usage

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion'

<Accordion type="single" defaultValue={['what']}>
  <AccordionItem value="what">
    <AccordionTrigger>What is in the kit?</AccordionTrigger>
    <AccordionContent>…</AccordionContent>
  </AccordionItem>
</Accordion>

Composer

Change the props and the source below follows.

Every component is built on its own primitives — no headless-UI dependency anywhere.

One global contract in styles.ts, themed by CSS variables in index.css.

Hover and press feedback is colour only. Nothing moves, resizes or casts a shadow on interaction.
Props
tsx
<Accordion type="single" defaultValue={['what']}>
  <AccordionItem value="what">
    <AccordionTrigger>What is in the kit?</AccordionTrigger>
    <AccordionContent>…</AccordionContent>
  </AccordionItem>
</Accordion>

Examples

Single

Multiple

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

Accordion

Extends Omit<ComponentProps<'div'>, 'defaultValue' | 'onChange'>.

PropTypeDefaultDescription
type'single' | 'multiple''single'Whether opening a section closes the previous one.
valuestring[]—Open sections. An array in both modes, so switching type needs no change.
defaultValuestring[][]Open sections. An array in both modes, so switching type needs no change.
onValueChange(value: string[]) => void—Fires with the new set of open sections.
collapsiblebooleantrueWith type="single", whether the open section can be closed again.

AccordionItem

Extends ComponentProps<'div'>.

PropTypeDefaultDescription
valuestringrequiredRequired. Identifies the section.

AccordionTrigger

Extends ComponentProps<'button'>.

AccordionContent

Extends ComponentProps<'div'>.