gnoud-ui
A React component library with a paper-and-ink design language, built as a monorepo: the
publishable package and the documentation site that is also its test bench.
| Path | What it is |
|---|
packages/ui | @gnoud-ui/react: the npm package (25 components, design tokens, one stylesheet) |
apps/docs | The docs site (Next.js): guides, a page per component, a token reference |
Live docs: gnoud-ui.vercel.app · npm
See the package README for installation and usage.
Design
Warm paper, near-black ink, one indigo accent. Things you can press are raised with a hard offset
shadow and sink into the page when pressed; fields and text stay flat. No blur anywhere. The
rules live in the design tokens, so changing them changes the whole system.
Develop
Requires Node 22.18+ or 24.11+ (see .nvmrc).
npm install
npm run dev # library in watch mode + docs at http://localhost:3000
npm run typecheck # all packages
npm run lint
npm run test # unit and accessibility tests (Vitest, jsdom, axe)
npm run build # builds the package (with publint and attw checks), then the docs
npm run e2e # real-browser tests (Playwright); builds first
Each component lives in packages/ui/src/components/<name>/: a .tsx, a <name>.styles.css
(name it .styles.css, not .css, or the build renames the output), and a test. Export it from
packages/ui/src/index.ts and add a docs page under apps/docs/app/docs/components/.
Release
Releases use Changesets.
- Make your change and run
npm run changeset; commit the generated file.
- When it lands on
main, the Release workflow opens a "Version Packages" pull request.
- Merging that pull request publishes
@gnoud-ui/react to npm.
Publishing needs an NPM_TOKEN repository secret (see the workflow for details).
License
MIT © gnoud
