8bit

Search docs

Search for a docs page

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

shadcn/ui docs

Yes. It adheres to the WAI-ARIA design pattern.

Installation

pnpm dlx shadcn@latest add https://8bit.cnlibs.com/r/accordion.json

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
<Accordion className="w-full max-w-md" defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Is it styled?</AccordionTrigger>
    <AccordionContent>
      Yes. It comes with default styles that match the 8bit aesthetic.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>Is it animated?</AccordionTrigger>
    <AccordionContent>
      Yes. Panels animate open and closed by default.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Multiple

Pass the multiple prop to allow more than one item to be open at the same time.

Yes. Pass the multiple prop to allow more than one item open at once.

Each item tracks its own open state independently.

Disabled

Set disabled on an item to prevent it from being toggled.

This item can be toggled normally.