@nous-research/ui

v1.5.2

Published

22 days ago

the shared design system for react ui @ nous. components, hooks, utils, fonts, overlays, etc.

Downloads

4,134,216

0High
0Medium
0Low

nous ui

the shared design system for react ui @ nous. components, hooks, utils, fonts, overlays, etc.

setup

npm i @nous-research/ui or pnpm i @nous-research/ui

import the global styles in your app's root css file:

@import 'tailwindcss';
@import '@nous-research/ui/styles/globals.css';

globals.css includes design tokens, typography utilities, and component styles. It references font families by name but does not ship font files.

Import the optional token stylesheet so --font-* variables resolve:

@import 'tailwindcss';
@import '@nous-research/ui/styles/fonts.css';
@import '@nous-research/ui/styles/globals.css';

Required fonts

| Token | Family | Used for | | --- | --- | --- | | --font-display | Sigurd Variable | H1–H4 | | --font-body / --font-ui | Rules Variable | Body, buttons, labels | | --font-mono | Courier Prime | Code, inputs |

The package does not bundle .woff2 files. Each consuming app loads fonts via next/font/local, self-hosted /public assets, or a licensed CDN, then maps them to the CSS variables above.

Storybook loads fonts from src/fonts/ via .storybook/fonts.css (dev-only; not published in the npm package). Keep licensed files in src/fonts/ for local preview — do not commit them if your license requires it.

Example with Next.js:

const sigurd = localFont({
  src: './fonts/Sigurd-Variable.woff2',
  variable: '--font-display',
  weight: '300 800'
})

// layout.tsx
<html className={sigurd.variable}>

Storybook in this repo loads fonts from .storybook/fonts.css (dev-only).

usage

everything exports from the top level export:

import {
  Button,
  Grid
  // whatever else!
} from '@nous-research/ui'

local development

two ways to preview components while editing:

storybook (per-component, primary)

pnpm dev              # dev server on http://localhost:6006
pnpm build-storybook  # static build → ./storybook-static

stories live next to components as *.stories.tsx. See DESIGN.md for token and 'use client' conventions. Start with Overview for the Hermes snapshot, then Foundations/Typography for the type scale and Components/Forms for buttons and form controls.

publishing

pnpm build     # unbuild → dist/ + copies css (no fonts/assets — web-hosted)
pnpm lint      # eslint
pnpm fmt       # prettier
pnpm test      # type-check + lint + unit tests

releases are published automatically when PRs merge to main. the github workflow bumps the package version from the merged PR labels (major, minor, or patch), pushes the tag, publishes to npm via trusted publishing, and creates a GitHub Release with notes from CHANGELOG.md.

before merging:

leave package.json at the current published version on main (CI bumps it after merge).
label the PR so the bump matches your changelog section:

| PR label | bump from 1.0.3 | changelog heading | | --- | --- | --- | | patch (default) | 1.0.4 | ## 1.0.4 | | minor | 1.1.0 | ## 1.1.0 | | major | 2.0.0 | ## 2.0.0 |

add that ## X.Y.Z section to CHANGELOG.md — release notes are pulled from it for npm and GitHub Releases.

the same file is rendered in Storybook under Docs → Changelog and shipped in the npm tarball.

the published tarball ships dist/, src/, README.md, and CHANGELOG.md (see files in package.json). inline source maps are embedded in dist/ so consumers can debug into the TypeScript source.

deployment

vercel.json builds Storybook and serves it as a static site at /storybook.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme