digital words feel too finished.
the interface arrives before a person has left a trace.
components / 21
marked separator
a divider can pause, group, label, or point. the stroke should say which one before the layout does.
shadcn
npx shadcn@latest add berkantay/cheez/marked-separatorlive
horizontal · wavyplayground
next chapter
draw the intention back in.
one imperfect line can make the hierarchy feel human.
orientation
stroke
label
spacing
character
ink
<MarkedSeparator
orientation="horizontal"
variant="wavy"
label="next chapter"
labelPosition="center"
spacing="normal"
tone="orange"
character="rushed"
/>voice
same boundary, different sentencefive kinds of pause
line
a quiet division
double
a firm boundary
wavy
a soft turn
zigzag
a hard shift
directional
continue this way
chapters
start, center, or endlabels live inside the line
field notes
between ideas
appendix
rails
no rotated horizontal assetvertical is drawn vertically
collect the language people already use.
make the intended hierarchy impossible to miss.
let real use put pressure on every decision.
direction
arrow belongs to one segmenta divider can become a route
01install
02compose
03ship
the same path can point home
composition
structure without boxeseditorial hierarchy
the page should show where the hand changed its mind.
the problem
most component libraries erase every trace of process. useful interfaces still need clarity, but clarity does not require sterility.
the response
cheez keeps the semantic primitive ordinary and lets the annotation carry the personality. remove the ink and the structure still makes sense.
keep going
reference
one Base UI separator rootapi
| prop | type | default | purpose |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | native separator orientation |
variant | "line" | "double" | "wavy" | "zigzag" | "directional" | "line" | stroke vocabulary |
direction | "forward" | "backward" | "forward" | directional arrow placement |
label | ReactNode | — | visible content between two strokes |
labelPosition | "start" | "center" | "end" | "center" | label position along the axis |
markLabel | boolean | true | marker wash behind the label |
labelMark | CheezType | "marker-swipe" | label drawing override |
labelColor | string | separator color | label ink override |
decorative | boolean | label-aware | presentation or structural semantics |
aria-label | string | string label | name for a structural separator |
tone | MarkedSeparatorTone | "neutral" | built-in ink palette |
color | string | tone color | custom stroke override |
mark | CheezType | variant-aware | horizontal stroke override |
character | CheezCharacter | "rushed" | drawing personality |
thickness | number | 1 | pen weight |
spacing | "compact" | "normal" | "loose" | "normal" | cross-axis breathing room |
length | CSS width | container | horizontal width or vertical height |
behavior notes
- Base UI provides the separator role, orientation state, and render composition
- unlabelled rules are decorative by default and stay out of the accessibility tree
- a visible string label makes the separator structural and supplies its accessible name
- vertical variants use dedicated path definitions so pen pressure travels down the rail
- directional labels draw the arrow on one segment only
- spacing changes empty cross-axis space, not the thickness of the stroke