Components
Accordion
SketchAccordion — expand/collapse sections with hand-drawn dividers and an animated chevron.
SketchAccordion renders a list of collapsible panels separated by rough.js
dividers. The chevron rotates on open, height animates with a spring, and a
single panel is open at a time by default.
Default
import { SketchAccordion } from "blackchalk";const items = [{ title: "What is Blackchalk?", content: "A hand-drawn, monochrome React UI kit built on rough.js." },{ title: "Is it responsive?", content: "Yes — components collapse and reflow on small screens." },{ title: "Can I theme it?", content: "Light and dark, derived from a single ink token." },];<SketchAccordion items={items} defaultOpen={[0]} />Multiple open
Pass allowMultiple to let more than one panel stay open at the same time.
<SketchAccordionitems={items}allowMultipledefaultOpen={[0, 1]}/>Props
| Prop | Type | Default |
|---|---|---|
items | { title: string, content: ReactNode }[] | — |
allowMultiple | boolean | false |
defaultOpen | number[] | [] |
style | CSSProperties | — |
See it in the Storybook playground, or read the source.