Accordion

Installation

Command

Manual

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

Install the following dependencies:

npm install radix-ui

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 type="single" collapsible 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 type="multiple" 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 Radix UI documentation for more information.