components/rough

Type Aliases

RoughProps

RoughProps = object & HTMLAttributes<HTMLElement>>

Props accepted by Rough.

Type Declaration

mark

mark: RoughMark

The mark: a box, underline, circle, highlight, speech bubble or line.

tone?

optional tone?: RoughTone

Theme ink (the default) or the coral accent.

seed?

optional seed?: number

Fixes the wobble, so the mark looks the same on every render.

weight?

optional weight?: number

Stroke width in CSS pixels.

roughness?

optional roughness?: number

0 is a ruler, 3 is a scribble.

fill?

optional fill?: "none" | "solid" | "hachure"

Fill inside a box, circle or bubble.

tail?

optional tail?: "left" | "right" | "none"

For bubble: the lower corner its tail leaves from.

points?

optional points?: string

For line: percent points in the box, e.g. 0,100 100,0.

animate?

optional animate?: boolean

Draw the mark in once, stroke by stroke, after delay. Skipped for reduced motion.

delay?

optional delay?: number

Seconds to wait before an animate mark draws in (default 0.2).

block?

optional block?: boolean

Render as a block (div) instead of inline (span).

Variables

Rough

const Rough: ForwardRefExoticComponent<object & HTMLAttributes<HTMLElement> > & RefAttributes<HTMLElement>>>>

A hand-drawn Rough.js mark (box, underline, circle, highlight, speech bubble or leader line) around its children, in theme ink or coral. Rough.js loads lazily after hydration; until then, and without JavaScript, a plain CSS border, underline or tint stands in. The mark is aria-hidden and never takes pointer events, so the children keep their focus rings and clicks.

Static pages can write the same attributes (see drawRough) instead of hydrating this component.