Collapsible

A single expand/collapse section — the simpler primitive behind Accordion. The chevron rotates open with the same hand-drawn path.

A number that locks the wobble. Omit it and Shuffle redraws every line.

Roughness1.5Lock seed

<Collapsible defaultOpen roughness={1.5}>
  <CollapsibleTrigger>What is a seed?</CollapsibleTrigger>
  <CollapsibleContent>A number that locks the wobble.</CollapsibleContent>
</Collapsible>

CLI install

npx doodleui-react add collapsible

Usage

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "doodleui-react";

<Collapsible defaultOpen>
  <CollapsibleTrigger>What is a seed?</CollapsibleTrigger>
  <CollapsibleContent>
    A number that locks the wobble.
  </CollapsibleContent>
</Collapsible>

Reach for Accordion instead when you need multiple sections that share open/close behavior.

Props

Prop	Type	Default	Notes
open / onOpenChange	boolean / (open: boolean) => void	uncontrolled	Radix controlled API.
defaultOpen	boolean	false	Initial open state when uncontrolled.
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.