Typography

Preset text components with optional hand-drawn underlines, highlights, and rules.

Sketch journal

Lead paragraph with doodle typography.

Body copy with an

inline highlight and

inline code

Ideas look better when the border wobbles.

Roughness1.5Lock seedHeading accentAnimate

<Heading level={2} accent="underline" roughness={1.5}>
  Sketch journal
</Heading>
<Text variant="lead">...</Text>

CLI install

npx doodleui-react add typography

Usage

import { Blockquote, Heading, Highlight, InlineCode, Text } from "doodleui-react";

<Heading level={1} accent="underline">Notes</Heading>
<Text variant="lead">A quick intro.</Text>
<Text>Marked <Highlight>important</Highlight> and <InlineCode>npm i</InlineCode>.</Text>
<Blockquote>Sketch borders optional.</Blockquote>

Props

Prop	Type	Default	Notes
level	1 \| 2 \| 3 \| 4 \| 5 \| 6	2	Heading renders as h1–h6.
accent	"none" \| "underline" \| "highlight"	"none"	Optional hand-drawn underline or marker behind Heading text.
animate	boolean	true	Draw-in accent strokes on Heading, Blockquote, InlineCode, Highlight. Overrides DoodleUIProvider. Reduced motion disables this unless the provider set forceAnimate.
roughness	number	1.5	How wobbly the stroke is. 0 is almost geometric. 3+ is messy.
seed	number	provider / random	Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed.
sketchColor	string	#1f1d1a	Stroke color. Also tints primary/accent fills where relevant.
className	string	undefined	Passed through to the root element.
style	CSSProperties	undefined	Passed through to the root element.