For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
0
Sponsor

Accordion

PreviousNext

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

Yes. It adheres to the WAI-ARIA design pattern and is built on Base UI primitives.

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

Installation

$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.vercel.app/r/accordion.json

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion/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

Examples

Basic

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

A registry of shadcn-style components styled with StyleX and built on Base UI primitives.

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

Multiple

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

With the `multiple` prop, more than one item can stay open at the same time.

This item is open too, because both values are in `defaultValue`.

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

Disabled

Use the disabled prop on AccordionItem to disable individual items.

This item can be toggled.

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

Borders

Wrap the Accordion in a bordered, rounded container to group the items.

Wrap the accordion in a bordered, rounded container and each item keeps its divider.

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

Card

Wrap the Accordion in a Card component.

Frequently asked questions
Everything you need to know.

Yes. Copy the source into your project and own it.

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

RTL

To enable right-to-left support, see the RTL guide.

انقر على 'نسيت كلمة المرور' في صفحة تسجيل الدخول، أدخل عنوان بريدك الإلكتروني، وسنرسل لك رابطًا لإعادة تعيين كلمة المرور. سينتهي صلاحية الرابط خلال 24 ساعة.

"use client";

import * as React from "react";

import { useTranslation } from "@/components/language-selector";
import type { Translations } from "@/components/language-selector";

API Reference

See the Base UI documentation for the full API.