Features

• Strict TypeScript components with stable, intentional props
• CSS-variable tokens (--oks-*) and semantic roles (primary/success/warning/…)
• Prefixed utilities (.oks-*) as an opt-in CSS import
• Accessible by default (keyboard support, visible focus, ARIA practices)
• Optional motion utilities via oks-ui/motion

Quickstart

1) Install

npm i oks-ui

pnpm add oks-ui

yarn add oks-ui

2) Import styles once

Recommended:

import "oks-ui/styles.css";

This includes:

• tokens (--oks-*)
• prefixed utilities (.oks-*)
• component styles

If you only want tokens/utilities:

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

You can also import oks-ui/theme.css (currently the same as tokens).

3) Use components

import { Button } from "oks-ui";

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

Docs

• Usage guide: docs/usage/index.md
• Installation: docs/usage/installation.md
• Setup (styles, SSR, bundlers): docs/usage/setup.md
• Theming and tokens: docs/usage/theming.md
• Components: docs/usage/components/index.md
• Maintainer docs: docs/internal/index.md
• AI indexing guide: docs/trae-ai/indexing-guide.md

Components

All components are exported from the main entry:

import { Button } from "oks-ui";

Browse the full list: docs/usage/components/index.md

Quick links:

• Button, Badge, Chip, Divider
• Alert, Toast, Tooltip
• Modal, Drawer, Dropdown, Tabs
• Avatar, Backdrop, Loader
• FormFieldSet (TextField, SelectField, DatePickerField, and more)

Theming

Override any variable in your app:

:root {
  --oks-color-primary-500: #7c3aed;
  --oks-space-4: 18px;
}

Add a new semantic color role (example: secondary) in your app:

:root {
  --oks-color-secondary-500: var(--oks-palette-slate-500);
}

Development

Canonical setup (this repo commits package-lock.json):

npm install
npm run build
npm test

More details: CONTRIBUTING.md

Configuration

The file oks.config.json controls which palettes, semantic roles, and utilities are generated into dist/*.css.

License

MIT