Skip to content

Repository files navigation

dowel

An opinionated React component library. One look, well made. No config, no forking, no theme bikeshedding.

dowel.sh · MIT


A dowel is the small precision-turned pin that joins two pieces of wood. Identical, unglamorous, load-bearing. That is what a component is.

pnpm add dowel
import "dowel/dowel.css";
import { Button } from "dowel";

<Button variant="primary">Ship it</Button>;

That is the whole setup. No Tailwind, no PostCSS config, no preset, no components.json, no copy-in generator. dowel is ESM-only.

What dowel is

  • A real package. Import components, bump a version, get the fixes. Your UI does not drift across apps.
  • Opinionated on purpose. There is no per-component override API. Retheming is three CSS variables declared on :root: --dowel-hue, --dowel-accent and --dowel-accent-fg. Hover and focus derive from the accent automatically.
  • Light and dark from day one, in one stylesheet. Dark comes on via .dowel-dark, via data-dowel-theme="dark", or from prefers-color-scheme — and .dowel-light / data-dowel-theme="light" on <html> pins light against a dark OS.
  • Accessible by construction. Behaviour comes from Base UI; every component is keyboard-tested and axe-checked.

Wrap your app in .dowel-root for the type and surface defaults. The full theming reference — every selector, every knob — lives in packages/dowel/README.md, and dowel.sh has a light/dark toggle in the nav.

What dowel is not

Not headless, not framework-agnostic, not a Tailwind plugin, not customisable per component. If you need a different button, dowel is the wrong library — that is the point.

Typeface

dowel is designed for Inter. It falls back to system-ui, which works but looks different. To match the docs:

pnpm add @fontsource-variable/inter
import "@fontsource-variable/inter";
import "dowel/dowel.css";

Inter is OFL-licensed. dowel does not bundle it, so you control whether it is self-hosted or served from a CDN.

Credit

dowel is an homage to the craft of Linear. Their interface is the clearest argument I know that density, restraint and one well-chosen hue beat a hundred configuration options.

I studied the visual language — the colour relationships, the type scale, the 28px control rhythm, the two elevation tiers — and reimplemented it from measurements. dowel ships none of Linear's assets: not their logo, not their icons, not their licensed typefaces.

dowel is not affiliated with, endorsed by, or sponsored by Linear.

Built by Karn Gyan under karnstack.

Status

Pre-1.0 and moving. The API will change between minor versions until it has lived in enough real apps to deserve a 1.0.0.

Licence

MIT

About

An opinionated React component library. One look, well made. dowel.sh

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages