Skip to content
oks-ui

Features

Strict TypeScript React components

Mistakes that fail in your editor, not in production.

The short answer

oks-ui is written in strict TypeScript, with strict mode, noUncheckedIndexedAccess and exactOptionalPropertyTypes all turned on, and ships complete type definitions for every component. Props such as variant and color are exact unions, and Chart checks your x and series against the keys of your data, so a typo fails at compile time instead of in the browser.

Strict all the way down

  • Strict mode plus the extra checks. strict, noUncheckedIndexedAccess and exactOptionalPropertyTypes are on for the whole library.
  • Complete definitions. Every component ships .d.ts files, with a type entry for each subpath.
  • Exact unions. Values like variant, color and chart type are unions of the values that exist, not string.
  • Works without TypeScript. Plain JavaScript projects use oks-ui the same way.

Mistakes the compiler catches

These are the real messages from the TypeScript compiler (5.9), from compiling deliberately wrong code against oks-ui 1.2.1. First, a Button:

<Button variant="nonsense">Save</Button>
// error TS2322: Type '"nonsense"' is not assignable to type
// 'ButtonVariant | undefined'.

<Button color="purple-ish">Save</Button>
// error TS2322: Type '"purple-ish"' is not assignable to type
// 'ButtonColor | undefined'.

Chart is generic over your data, so a misspelled key is caught, and the compiler suggests the one you meant:

type Row = { month: string; sales: number };

<Chart type="line" data={rows} x="mnth" series="sales" />
// error TS2820: Type '"mnth"' is not assignable to type
// 'keyof Row | ((row: Row) => ChartCategory) | undefined'.
// Did you mean '"month"'?

<Chart type="line" data={rows} x="month" series="slaes" />
// error TS2820: Type '"slaes"' is not assignable to type
// 'ChartSeriesDef<Row> | ChartSeriesDef<Row>[] | undefined'.
// Did you mean '"sales"'?

<Chart type="scatter" data={rows} x="month" series="sales" />
// error TS2322: Type '"scatter"' is not assignable to type 'ChartType'.

Where the types are looser

Not everything is checked against your data. A Table column’s key is a plain string, so a misspelled column key is not a compile error; that column just renders an empty cell. If you want the check, tie the key to your row type with satisfies:

import type { TableColumn } from "oks-ui/table";

type User = { id: string; name: string; lastSeen: Date };

const columns: TableColumn<User>[] = [
  { key: "name" satisfies keyof User, header: "Name" },
  // { key: "nmae" satisfies keyof User, ... }
  // error TS1360: Type '"nmae"' does not satisfy the expected type 'keyof User'.
];

Import the types you need

Every component exports its prop and option types next to it, from the same subpath you import the component from.

import type { ButtonProps, ButtonVariant } from "oks-ui/button";
import type { TableColumn, TableSortDescriptor } from "oks-ui/table";
import type { ChartProps } from "oks-ui/chart";

Go further

Questions

Is oks-ui written in TypeScript?

Yes, in strict TypeScript. The full strict suite is enabled, including noUncheckedIndexedAccess and exactOptionalPropertyTypes, and the package ships complete .d.ts type definitions for every component.

Do I have to use TypeScript with oks-ui?

No. oks-ui works the same in plain JavaScript. TypeScript users get the type checking and editor hints on top.

How do I import oks-ui's prop types?

Each component exports its prop and option types from its own subpath, for example import type { ButtonProps, ButtonVariant } from "oks-ui/button" and import type { TableColumn } from "oks-ui/table".

Does oks-ui use any?

Almost never. In the shipped type definitions the any type appears in two low-level places: the argument of a form validation rule, and a helper's return type. It does not appear in component props.

Keep exploring

Figures and claims on this page were last checked on 2026-09-24.