Setup Guide

Installation

Install oks-ui in your React or Next.js project. The library works with any bundler that supports CSS imports.

1. Install

# Using npm
npm install oks-ui

# Using pnpm
pnpm add oks-ui

# Using yarn
yarn add oks-ui

2. Import the CSS

Import the styles once in your root entry point. The main styles.css file includes all tokens, utilities, and component styles.

// app/layout.tsx or pages/_app.tsx or main.tsx
import "oks-ui/styles.css";

Granular Imports

If you prefer to import only what you need:

import "oks-ui/tokens.css"; // CSS variables only
import "oks-ui/utilities.css"; // .oks-* utility classes
import "oks-ui/components.css"; // Component styles

3. Next.js Setup

oks-ui uses CSS custom properties and CSS @layer — no configuration needed for Next.js. The library ships as ES-only, so add it to your transpilePackages if you encounter module resolution issues.

// next.config.ts
import type { Configuration } from "next";

const config: Configuration = {
transpilePackages: ["oks-ui"],
};

export default config;

4. Vite / Other Bundlers

Import the CSS in your entry file and use the components directly. No bundler plugin required. The CSS is pre-compiled and fully static.

// src/main.tsx
import "oks-ui/styles.css";
import { Button } from "oks-ui";

function App() {
return <Button>Click</Button>;
}

5. TypeScript

oks-ui is written in strict TypeScript. Types are included — no @types/oks-ui needed. The library is compiled with declaration: true and declarationMap: true for go-to-definition support in your editor.

import type { ButtonProps } from "oks-ui";

function MyButton({color}: Pick<ButtonProps, 'color'>) {
return <Button color={'color'}>Click</Button>;
}