Accordion

Installation

Command

Manual

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Install the following dependencies:

npm install @base-ui/react

Copy and paste the following code into your project.

View complete source: components/ui/accordion.tsx

Update the import paths to match your project setup.

Usage

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

<Accordion defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Composition

Use the following composition to build an Accordion:

Accordion
├── AccordionItem
│   ├── AccordionTrigger
│   └── AccordionContent
└── AccordionItem
    ├── AccordionTrigger
    └── AccordionContent

Basic

A basic accordion that shows one item at a time. The first item is open by default.

Multiple

Use the multiple prop to allow multiple items to be open at the same time.

Disabled

Use the disabled prop on AccordionItem to disable individual items.

Borders

Add border to the Accordion and border-b last:border-b-0 to the AccordionItem to add borders to the items.

Card

Wrap the Accordion in a Card component.

RTL

To enable RTL support in JGuang UI, see the RTL configuration guide.

API Reference

See the Base UI documentation for more information.