bydefaulthuman.fun

A hand-drawn React component library built on Rough.js.

Installation

package manager

npx shadcn add https://bydefaulthuman.fun/r/accordion.json

Props

Accordion

PropTypeDefaultDescription

defaultValue

string | string[]

—

Item(s) open by default (uncontrolled).

multiple

boolean

false

Allow multiple items to be open at once.

animateOnHover

boolean

true

Re-sketches the border on mouse enter.

onValueChange

(value: string | string[]) => void

—

Fires when open items change. Returns array when multiple is true.

theme

"pencil" | "ink" | "crayon"

—

Overrides the global Crumble theme for this component.

stroke

string

—

CSS color for the rough stroke.

strokeMuted

string

—

CSS color for muted strokes. Defaults to a transparent mix of stroke.

fill

string

—

CSS color for the rough fill.

AccordionItem

PropTypeDefaultDescription

value*

string

—

Unique identifier for this item, passed to AccordionTrigger and AccordionContent.

AccordionTrigger

PropTypeDefaultDescription

value*

string

—

Must match the parent AccordionItem value.

AccordionContent

PropTypeDefaultDescription

value*

string

—

Must match the parent AccordionItem value. Content is hidden when this item is closed.

Accordion keeps triggers as real buttons with aria-expanded, which is the right semantic pattern for disclosure content. Keep each trigger label descriptive enough to stand alone when navigated out of context.

Examples

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/components/crumble/ui/accordion";

<Accordion>
  <AccordionItem value="a">
    <AccordionTrigger value="a">What is crumble?</AccordionTrigger>
    <AccordionContent value="a">
      A hand-drawn React component library built on Rough.js.
    </AccordionContent>
  </AccordionItem>
</Accordion>;

Accordion

Installation

Props

Accordion

AccordionItem

AccordionTrigger

AccordionContent

Multiple open

Accessibility

Examples

On this page