Skip to content
oks-ui

Foundations

TypeScript

Written with the full strict suite enabled — including noUncheckedIndexedAccess and exactOptionalPropertyTypes — and shipped with complete .d.ts files.

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, no any in the public API, and props that reject nonsense combinations at compile time.

Generic components infer from your data

Table and Chart are generic over your row type. Column keys and chart x/series are constrained to keys that actually exist on the row.

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

<Table<User>
  aria-label="Users"
  columns={[
    { key: "name", header: "Name" },
    // { key: "nmae", … }  ← TS error: not a key of User
  ]}
  rows={users}
  getRowKey={(u) => u.id}
/>

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.