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.
1
Sponsor

Accordion

PreviousNext

Accessible single or multiple disclosures with fluid hover.

Preview

Single panel

Base UI manages focus and disclosure state.

Multiple panels and compact size

Base UI manages focus and disclosure state.

Installation

$ pnpm dlx shadcn@latest add https://ui.ketyap.me/r/accordion.json

Usage

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/components/ui/accordion";
 
<Accordion multiple defaultValue={["about"]}>
  <AccordionItem value="about">
    <AccordionTrigger>About</AccordionTrigger>
    <AccordionContent>Details about this project.</AccordionContent>
  </AccordionItem>
</Accordion>;

API Reference

Root accepts Base UI Accordion props including multiple, value, defaultValue, onValueChange and disabled. Values are arrays, including single-panel mode. Items accept value and disabled. Trigger density follows SizeProvider; height animation respects reduced motion. Use arrow keys, Home/End, Enter and Space.