Christian CastillejoDesign Engineer
Nectar UI/
Molecule
Radix Primitive • Keyframes • Compound Pattern

Accordion.

A vertically stacked set of interactive headings that each reveal an associated section of content. Essential for progressive disclosure in dense interfaces.

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

Yes. It adheres to the WAI-ARIA design pattern, supporting full keyboard navigation and screen reader announcements.

Content Flow & Typography

Zero Layout Shift

Animating height from '0' to 'auto' is impossible in pure CSS. We use CSS variables (`--radix-accordion-content-height`) computed at runtime to animate specifically to the content's exact pixel height, ensuring smooth motion without jank.

Keyboard A11y

Full WAI-ARIA compliance. Users can navigate headers with `ArrowUp`/`ArrowDown`, expanding sections with `Enter` or `Space`, and jumping between the first and last items with `Home`/`End`.

FaqSection.tsx
<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>