Accordion
Single or multiple expansion with grid-rows height animation, three looks and arrow-key header navigation.
3 files · 163 locdeps: clsx, tailwind-merge
No — you copy source files into components/opus. Nothing to upgrade, nothing to fight.
No. Shaders run on a tiny WebGL2 helper (ShaderCanvas) and simulations on gl-sim — both ship as files.
Overlays use native <dialog>, menus and grids have full keyboard support, and every animation honours reduced motion.
Yes. Token names match, so components share the same theme.
Height animates with grid-template-rows (0fr → 1fr), so content of any size eases in without measuring.
Height animates with grid-template-rows (0fr → 1fr), so content of any size eases in without measuring.
Height animates with grid-template-rows (0fr → 1fr), so content of any size eases in without measuring.
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/accordion.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs accordionUsage
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/opus/ui/accordion";
<Accordion type="single" defaultValue={["a"]}>
<AccordionItem value="a">
<AccordionTrigger>Question</AccordionTrigger>
<AccordionContent>Answer</AccordionContent>
</AccordionItem>
</Accordion>API
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | "single" | Expansion model. |
| value / defaultValue / onValueChange | string[] | — | Open items. |
| collapsible | boolean | true | Single mode: allow closing all. |
| variant | "default" | "separated" | "ghost" | "default" | Look. |