Accordion

Collapsible content sections

UI PrimitiveDisplay

Overview

A compound component built on Radix UI's Accordion primitive. Supports single and multiple open sections, with animated open/close transitions.

Usage

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@leanicon/web-builder-library";

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>What is this?</AccordionTrigger>
    <AccordionContent>This is the answer to the question.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>How does it work?</AccordionTrigger>
    <AccordionContent>It works by expanding and collapsing content.</AccordionContent>
  </AccordionItem>
</Accordion>;

Variants

Single open item (collapsible):

This is the answer to the question.

Multiple open items:

This is the answer to the question.

It works by expanding and collapsing content.

Notes

  • Accordion accepts all Radix Accordion.Root props (type, defaultValue, value, onValueChange, collapsible).
  • AccordionItem requires a unique value prop.
  • The chevron icon in AccordionTrigger rotates 180° when the item is open.
  • Dark mode is handled via semantic tokens — no additional configuration needed.

Props

NameTypeDefaultRequiredDescription
asChildboolean—No