Accordion
Radix accordion with sketch dividers between items and a hand-drawn chevron that rotates on expand.
A number that locks the wobble. Omit it and Shuffle redraws every line.
<Accordion defaultValue="one" roughness={1.5}>
<AccordionItem value="one">
<AccordionTrigger>What is a seed?</AccordionTrigger>
<AccordionContent>A number that locks the wobble.</AccordionContent>
</AccordionItem>
</Accordion>CLI install
npx doodleui-react add accordion
Usage
import {
Accordion,
AccordionItem,
AccordionTrigger,
AccordionContent,
} from "doodleui-react";
<Accordion defaultValue="one">
<Accordion.Item value="one">
<Accordion.Trigger>What is a seed?</Accordion.Trigger>
<Accordion.Content>A number that locks the wobble.</Accordion.Content>
</Accordion.Item>
</Accordion>
{/* Named exports also work */}
<AccordionItem value="two">…</AccordionItem>
Keyboard, collapse, and ARIA come from Radix. doodle-ui draws the rules and the chevron. See Controlled state.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| type | "single" | "multiple" | "single" | One open panel, or many. |
| collapsible | boolean | true | When type is single, allows closing the open item. |
| defaultValue / value | string | string[] | undefined | Open item id(s). |
| roughness | number | 1.5 | How wobbly the stroke is. 0 is almost geometric. 3+ is messy. |
| seed | number | provider / random | Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed. |
| sketchColor | string | #1f1d1a | Stroke color. Also tints primary/accent fills where relevant. |
| className | string | undefined | Passed through to the root element. |
| style | CSSProperties | undefined | Passed through to the root element. |