Theming

Notchset components read your shadcn tokens, so they look right in any shadcn app with nothing extra installed. Keep your palette, point the signal at your brand colour, or install the Notchset theme for the full paper-and-ink look. Brand names, logos and sample text are props, so nothing of ours ends up in your product.

Your palette

Out of the box, surfaces, text and rules come from your --background, --foreground, --border, --muted and the rest. Notchset's own --notchset-* tokens refine them where the theme is installed; without it, each one falls back to the shadcn token it stands in for.

• The signal colour (live nodes, the run accent, destructive actions): --notchset-signal. Without it, Notchset uses your --destructive.
• States follow. With the Notchset theme installed, every hover, press, tint and line is worked out from your tokens: change --primary and its hover and press change with it; change --notchset-signal and its hover, press, readable text and tints follow (the text stays at 4.5:1 on the default paper). Set --notchset-on-signal to paper or ink, whichever reads on your signal. Set any --notchset-* token yourself to override one.
• Every part has its own colour, as in shadcn: filled controls (checked, on, selected, slider and progress fills, the default badge) use --primary; chart bars, lines, areas and slices use --chart-1 to --chart-5; text uses --foreground; surfaces --background and --card; lines --border. So bars, background and text can each be a different colour.
• One part of a page: set the tokens on its container and add data-notchset-recolor to it, so the states are worked out from the area's colours rather than the page's. Nothing outside changes.

Try it

Pick each colour on its own: the ink for controls, the chart marks, the paper, the text and the signal. Hover and press the buttons: their states follow too.

:root {
  --primary: #111110;
  --primary-foreground: #EDEBE6;
  --ring: #111110;
  --notchset-signal: #FF4D1F;
  --notchset-on-signal: #111110;
  --chart-1: #111110;
  --background: #EDEBE6;
  --foreground: #111110;
}
/* Hover, press, signal text and tints follow these. */

/* Your brand as the signal, light and dark. */
:root {
  --notchset-signal: #0e9f8e;
}
.dark {
  --notchset-signal: #2dd4bf;
}

/* Only one area (<section class="billing" data-notchset-recolor>): */
.billing {
  --primary: #1e2a78;
  --notchset-signal: #db3f74;
}

Keep overrides in your own CSS. Each add (and every --overwrite update) writes the registry's CSS into your global stylesheet again, so edits inside the installed Notchset rules are lost. Put your overrides in rules of your own, after them or in a separate file.

Dark and light

Notchset is designed in both, with its own dark values rather than inverted colours. It follows a .dark class on an ancestor (the shadcn and next-themes convention). Set that class before the first paint (next-themes does) and there is no flash on load. The Notchset theme also sets its dark tokens under [data-theme="dark"], but Tailwind's dark: variant, as shadcn sets it up, follows .dark only, so set the class as well.

The Notchset theme (optional)

The theme is global. It replaces your app's shadcn tokens (--background, --primary, --border and the rest, in light and dark) with Notchset's paper, ink and one signal colour, adds the --notchset-* motif tokens, and adds Archivo and Martian Mono. Every shadcn component in the app changes, not just Notchset ones. Skip it to keep your palette. Commit first so you can review the diff.

npx shadcn@latest add https://notchset.dev/r/notchset.json

Next: Motion, to switch animation off.