Theme generator

Adjust global sketch parameters and preview Button, Card, Input, Checkbox, and Badge. Copy a DoodleUIProvider block or CSS variables for projects that do not wrap everything in React context.

Presets

Roughness (1.5)Stroke width (1.75)Bowing (1.0)Stroke colorFill styleFont

Dark preview

Badge

Card

Sketch parameters update live.

EmailRemember me

DoodleUIProvider

<DoodleUIProvider
  theme="light"
>
  <SketchSeedProvider>
    {/* your app */}
  </SketchSeedProvider>
</DoodleUIProvider>

CSS variables

@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');
@import "doodleui-react/styles.css";
:root {
  --doodle-ui-roughness: 1.5;
  --doodle-ui-bowing: 1;
  --doodle-ui-stroke-width: 1.75;
  --doodle-ui-stroke-color: #1f1d1a;
  --doodle-ui-fill-style: hachure;
  --doodle-ui-font-family: "Patrick Hand", cursive;
  --doodle-ui-bg-color: #f7f6f2;
  --doodle-ui-text-color: #1f1d1a;
  --doodle-ui-color-info: #1d4e89;
  --doodle-ui-color-warning: #8a5200;
  --doodle-ui-color-error: #b91c1c;
  --doodle-ui-color-success: #2d6a4f;
}

Set defaults on DoodleUIProvider or with --doodle-ui-* CSS variables. Per-component roughness props still override either.