Skip to content
oks-ui

Getting started

oks-ui is a React component library written in strict TypeScript, with a design system that lives entirely in CSS custom properties.

Step 1 of 5

  1. Install it

    Now

    One package. There is no provider to add and nothing to configure.

    $ npm install oks-ui
    added 1 package
oks-ui@1.5.0
0 dependencies

  2. Import the styles once

    Next

    One line, in your app entry or root layout. It brings in the design tokens and every component's CSS.

    import "oks-ui/styles.css";

    Tokens, the utility layer and the component styles are loaded. No ThemeProvider to wrap your app in.

  3. Render your first component

    Next

    Import from a per-component path and use it like any React component.

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

const Page = () => {
  return <Button color="primary">Get started</Button>;
};

export default Page;

    That is a real Button, rendered right here.

  4. Make it yours

    Next

    Override one CSS variable and every component follows. Pick a colour on the right.

    :root {
  --oks-color-primary-500: #8b5cf6;
}
    Pro plan
    :root {
  --oks-color-primary-500: #8b5cf6;
}

  5. Ship it

    Next

    You have the whole loop. Where you go next depends on what you are building.

What you get

  • 45 components — buttons, forms, tables, charts, overlays, navigation, a command palette, a Kanban board, a block editor. Enough to build a real product, not a starter kit.
  • Zero runtime dependencies. The only peers are react and react-dom. Nothing else reaches your bundle.
  • CSS-variable theming. Every colour, space, radius and shadow is an --oks-* custom property. No ThemeProvider, no config object, no runtime JS for styling.
  • Accessible by default. Keyboard navigation, visible focus, ARIA roles and reduced-motion support are built into the interactive components.
  • Strict TypeScript. Built with noUncheckedIndexedAccess, exactOptionalPropertyTypes, and the full strict suite. Props are stable and intentional.

The tradeoff

oks-ui asks you to accept a small amount of strictness — a real type on every field, a stylesheet import, per-component subpath imports if you want the smallest possible bundle. In exchange you get components that don't surprise you, upgrades that are one version bump, and a theme system with no ceremony.