Getting Started
Overview
oks-ui is a strict TypeScript React component library with a CSS-variable design system and prefixed utilities. Zero runtime dependencies, accessible by default, and built for modern React.
Features
Zero Runtime Dependencies
No runtime deps — just React and your bundler. The CSS is compiled to standalone files.
CSS Variable Tokens
Every color, space, radius, and shadow is a --oks-* custom property. Override anything from your app CSS.
TypeScript Strict
noUncheckedIndexedAccess, exactOptionalPropertyTypes — the full TypeScript strict suite.
Prefixed Utilities
Opt-in .oks-* utility class system for rapid prototyping without leaving your component files.
Keyboard + ARIA
Keyboard navigation, visible focus indicators, proper ARIA roles, and reduced-motion support.
CSS @layer + :where()
Component styles use CSS @layer and :where() to keep specificity at zero — easy to override.
Polymorphic Components
Components like Button support an `as` prop — render as any element or component.
Compound Components
Tabs, Dropdown, Drawer use compound component patterns for flexible composition.
Quick Install
Import Styles
// Or granular imports:
import "oks-ui/tokens.css"; // --oks-* CSS variables only
import "oks-ui/utilities.css"; // .oks-* utility classes
import "oks-ui/components.css";// Component styles
Use a Component
export function Example() {
return ( <Button color="primary">Save</Button>
);
}