no. paths use SVG and the Web Animations API already available in the browser.
components / 14
marked accordion
opening a section does more than reveal content. the hand circles back and claims the whole thought.
shadcn
npx shadcn@latest add berkantay/cheez/marked-accordionlive
1 openplayground
no. paths use SVG and the Web Animations API already available in the browser.
size
character
boundary
open title
indicator
boundary ink
title ink
expansion
<MarkedAccordion
value={value}
onValueChange={setValue}
size="medium"
character="rushed"
frameMark="corner-box"
>
<MarkedAccordionItem value="motion">
<MarkedAccordionHeader>
<MarkedAccordionTrigger>does this need motion?</MarkedAccordionTrigger>
</MarkedAccordionHeader>
<MarkedAccordionPanel>no external motion library.</MarkedAccordionPanel>
</MarkedAccordionItem>
</MarkedAccordion>behavior
single, multiple, disabled, searchablestates
no. paths use SVG and the Web Animations API already available in the browser.
yes. normalized paths stretch with the marked element while keeping their drawing character.
no. paths use SVG and the Web Animations API already available in the browser.
no. paths use SVG and the Web Animations API already available in the browser.
no. paths use SVG and the Web Animations API already available in the browser.
yes. normalized paths stretch with the marked element while keeping their drawing character.
yes. every registry item brings only its declared Cheez and Base UI dependencies.
composition
progressive controls, all openconfigure the hand
three decisions
keep the whole configuration visible or collapse what you have already settled.
ink intensity
reference
root, item, header, trigger, panelapi
| part | prop | type | default | purpose |
|---|---|---|---|---|
| Root | value | string[] | — | controlled expanded items |
| Root | defaultValue | string[] | [] | initial expanded items |
| Root | onValueChange | function | — | expansion callback with reason |
| Root | multiple | boolean | false | allow several open panels |
| Root | disabled | boolean | false | disable the whole set |
| Root | keepMounted | boolean | false | retain closed panel DOM |
| Root | hiddenUntilFound | boolean | false | allow browser find to reveal content |
| Root | size | "small" | "medium" | "large" | "medium" | spacing and type scale |
| Root | frameMark | CheezType | "corner-box" | expanded item boundary |
| Root | frameColor | string | "#8f74ff" | boundary ink |
| Root | openMark | CheezType | "underline" | expanded title mark |
| Root | openColor | string | "#b7ff3c" | expanded title ink |
| Root | interactionMark | CheezType | "short-underline" | hover and focus mark |
| Root | interactionColor | string | "#35d9ff" | interaction ink |
| Root | iconMark | CheezType | "cross" | hand-drawn plus/close glyph |
| Root | iconColor | string | "#ff5fa2" | glyph ink |
| Root | character | "calm" | "rushed" | "chaotic" | "rushed" | drawing personality |
| Item | value | string | required | stable item identity |
| Item | disabled | boolean | false | disable one section |
| Item | onOpenChange | function | — | local expansion callback |
| Item | frameMark | CheezType | root value | local boundary override |
| Panel | keepMounted | boolean | root value | local mounting override |
| Panel | contentClassName | string | — | inner content styling |
behavior notes
- every heading contains a native button tied to its panel
- Tab follows normal document order between triggers
- the panel animates using Base UI's measured CSS height variable
- multiple mode accepts several expanded values
- hidden-until-found lets browser search reveal closed content
- the rotating cross is a Cheez drawing, not a stock plus icon