Primitive · CLI
Accordion
Disclosure with height:auto, chevron rotate, and optional focus morph.
Preview
npx shadcn@latest add @atroui/accordionnpx shadcn add @atroui/accordion — own the files after install.
Panel height settles with revealTween; chevron rotates; open trigger morphs a quiet focus wash.
Prefers-reduced-motion falls back to Base UI CSS height — no path draw, no layoutId wash.
Installation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/accordionSource lands in your repo. Installation · Registry
Usage
Use for FAQ or settings sections. Panel height settles with revealTween; open trigger can morph focus wash.
tsx
import {
Accordion,
AccordionHeader,
AccordionItem,
AccordionPanel,
AccordionTrigger,
} from "@/components/ui/accordion"
<Accordion defaultValue={["install"]}>
<AccordionItem value="install">
<AccordionHeader>
<AccordionTrigger>Install</AccordionTrigger>
</AccordionHeader>
<AccordionPanel>
npx shadcn add @atroui/accordion
</AccordionPanel>
</AccordionItem>
</Accordion>Accordion