Playground

Every Sketchcn component draws through the same --sketch-* variables. Tweak them here, watch the preview redraw, then paste the block into your globals.css.

Buttons

Inputs

Navigation

Pencil first, ink later.

Separators

Feedback

Fresh ink

No two outlines match.

Smudged

Something went wrong on the page.

Cards

Sketch card

Rough edges on purpose.

Patterned card

Paper variants tint with --paper-pattern.

Overlays

Controls

Seed & theme

Seed

20260828

Theme

Stroke

Roughness1.1

Bowing1.4

Stroke width1.6

Fill style

Single stroke

Preserve vertices

Background hatching

Fill style

Fill weight0.4

Hachure gap4

Hachure angle-45

Opacity0.5

Theme colors

background

foreground

primary

primary-foreground

secondary

muted

muted-foreground

accent

border

destructive

Sketch colors

Stroke

Hatch fill

Paper pattern

Paper

Pattern

Opacity0.4

globals.css

Paste this next to your other theme variables. Only values that differ from the Sketchcn default are emitted.

/* Every value still matches the Sketchcn default — nothing to override. */