Components
Is it accessible?
Yes. It adheres to the WAI-ARIA design pattern.
Customize
Installation
$ pnpm dlx shadcn@latest add @framecn/accordion
Usage
import { Accordion } from "@/components/ui/accordion";<Accordion />Smooth transitions
The docs preview animates open → close via useAccordionTransition. In your composition, drive the same hook and pass style:
import { Accordion } from "@/components/framecn/accordion";
import { useAccordionTransition } from "@/components/framecn/use-accordion-transition";
const style = useAccordionTransition([
{ at: 18, state: "opened", duration: 16 },
{ at: 78, state: "closed", duration: 12 },
]);
<Accordion style={style} />;API Reference
Accordion
| Prop | Type | Default |
|---|---|---|
state | "opened" | "closed" | "closed" |
style | AccordionStyle | - (takes precedence over state) |
title | string | "Is it accessible?" |
content | string | WAI-ARIA default copy |
contentHeight | number | 64 |
variant | "default" | "ghost" | "default" |
theme | Partial<FramecnTheme> | - |