Installation

1. Install

$ npm install oks-ui

2. Import the styles once

In your app entry or root layout. This one line brings in the design tokens, the opt-in utility layer, and every component's CSS.

import "oks-ui/styles.css";

Need just the tokens and utilities, without component styles?

import "oks-ui/tokens.css";
import "oks-ui/utilities.css";

3. Use a component

import { Button } from "oks-ui";

export const Example = () => {
  return <Button color="primary">Save</Button>;
};

Barrel vs. per-component imports

The example above imports from the oks-ui barrel — simplest, and fine for most apps. For the smallest possible bundle, import each component from its own subpath and add its stylesheet:

import { Button } from "oks-ui/button";
import "oks-ui/button.css";

Your bundler then ships only the components you actually import. In webpack, Vite, Rollup and Rspack the stylesheet import inside oks-ui/button is followed automatically; under Next.js with Turbopack, add the .css line yourself.

What it costs

Gzipped sizes measured on oks-ui 1.3.1 on 3 October 2026: JavaScript minified with esbuild and React left out, importing each component from its own subpath; CSS as shipped in the package.

The last row is the ceiling if you used everything. A bundler ships only what you import, so most pages cost far less. Per-component breakdowns are on the zero dependencies page, and the CSS trade-off inside Next.js is on the Next.js page.

Requirements

• React 18 or newer (React 19 included).
• Any bundler. No build plugin required.