@noveo/uikit

Noveo's React design system: Base UI primitives restyled with the company's tokens, and batteries-included components composed on top of them and styled to Figma.

Documentation · Storybook

Install

npm install @noveo/uikit
# pnpm add @noveo/uikit
# yarn add @noveo/uikit
# bun add @noveo/uikit

React ^18.3.1 || ^19.0.0 and a matching react-dom are peer dependencies.

Use

import { Button, Dialog, Select } from '@noveo/uikit/ui';
import { Checkbox, Tooltip } from '@noveo/uikit/primitives';
import { SearchIcon, PlusIcon } from '@noveo/uikit/icons';

<Button variant="primary" size="md">
  Save
</Button>;

Wrap the app in AppProvider once. Components render without it, but it mounts the toast viewport — toast.success(…) is callable from anywhere and renders nothing until that viewport exists — and it carries the CSP nonce, text direction and portal container:

import { AppProvider } from '@noveo/uikit/ui';

<AppProvider>
  <App />
</AppProvider>;

Importing from /ui or /primitives pulls the stylesheet and the typeface in for you, and tree-shaking still works — a bundle with one Button carries one Button, not the whole kit. Both are exported directly if you want to control the order:

import '@noveo/uikit/styles.css';
import '@noveo/uikit/fonts.css';

Skip fonts.css if the app already serves Nunito Sans. The faces ship as separate WOFF2 files, so a browser downloads only the weights a page renders.

Two layers

| Import | What it is | | -------------------------- | ----------------------------------------------------------------------- | | @noveo/uikit/primitives | Base UI parts restyled with design tokens — used like Base UI | | @noveo/uikit/ui | Design-system components composed from the primitives, styled to Figma | | @noveo/uikit/icons | Tree-shakeable named icon exports | | @noveo/uikit/base-ui | The whole unstyled Base UI surface, for what the kit does not cover |

Form controls render only the control. Titles, descriptions, required markers and error text belong to the Field wrapper — compose it around any control.

The package ships 96 modules marked "use client", so it works under React Server Components. Plain Rollup warns once per module about the directive; see the installation page for the one-line filter.