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

Compound components expose a classNames object keyed by slot, so you can reach parts the outer className can't.

<Card classNames={{ base: "border-dashed", body: "p-8" }}>…</Card>

Prototype with the utility layer

oks-ui/utilities.css gives you token-aware classes — .oks-p-4, .oks-rounded-lg, .oks-bg-primary-500, .oks-text-neutral-600. Handy for one-off spacing without writing CSS, and they stay in sync with your theme overrides.

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: "Saving…",
  success: "Draft saved",
  error: "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.