TypeScript

You don’t have to use TypeScript

oks-ui works the same in plain JavaScript. But if you do use TS, the types are precise: discriminated unions on type, prop values such as variant and color typed as exact unions, and almost no any (it appears in two low-level helpers, not in component props).

Chart checks your data’s keys

Chart is generic over your row type. Its x and series are checked against the keys of your rows, and type is one of the seven chart types, so a typo fails to compile.

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

<Chart type="line" data={rows} x="month" series="sales" />  // ok
<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"'?

Table is generic over your row type for its callbacks (getRowKey, render, sortValue), but a column’s key is a plain string, so a misspelled column key is not a compile error. Check column keys yourself, or type them from your row type.

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

const columns: TableColumn<User>[] = [
  { key: "name" satisfies keyof User, header: "Name" },
];

Importing types

Every component exports its prop and enum types next to it.

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

The one rough edge

If your app is on React 19 and pins a newer @types/react than the one oks-ui was built against, passing a polymorphic as={Link} can surface a ReactNode type mismatch that isn't a real bug. Cast the component (as={Link as ElementType}) or wrap it once in a small typed helper.