Tips & tricks

Render any component as something else

Interactive components take a polymorphic as prop. Pass your router's link and a Button becomes a real anchor with all its styling and states.

import Link from "next/link";
import { Button } from "oks-ui/button";

<Button as={Link} href="/pricing" color="primary">See pricing</Button>

Style the inside, not just the wrapper

Components with several parts expose a classNames object keyed by slot, so you can reach parts the outer className can't. Table, for example, has slots for the header cell, row and cell; a component with a single part, like Card, has only base.

<Table
  aria-label="Users"
  classNames={{ headerCell: "uppercase", cell: "py-2" }}
  columns={columns}
  rows={users}
  getRowKey={(u) => u.id}
/>

Prototype with the utility layer

oks-ui/utilities.css gives you token-aware spacing and radius classes — .oks-p-4, .oks-mt-2, .oks-rounded-lg. Handy for one-off spacing without writing CSS, and they stay in sync with your theme overrides because each one reads a token, for example padding: var(--oks-space-4).

Toast is imperative

Wrap your app once in ToastProvider, then fire toasts from anywhere — including outside React, in a fetch handler.

import { toast } from "oks-ui/toast";

await toast.promise(saveDraft(), {
  loading: { title: "Saving…" },
  success: () => ({ title: "Draft saved" }),
  error: () => ({ title: "Couldn't save" }),
});

Charts take your row data as-is

No reshaping. Give Chart an array of objects plus the key names.

<Chart type="bar" data={rows} x="quarter" series={["revenue", "cost"]} />

Reduced motion is automatic

Every animation checks prefers-reduced-motion. If you build your own motion on top, import useReducedMotion from oks-ui/motion and gate it the same way.

Keep the bundle small

Import from subpaths (oks-ui/button) rather than the barrel, and only pull oks-ui/utilities.css if you actually use the .oks-* classes.