# oks-ui > oks-ui is a strict-TypeScript React component library with a CSS-variable > design system. It has zero runtime dependencies beyond React, needs no theme > provider and no configuration, and is accessible by default (keyboard support, > visible focus, ARIA roles, reduced-motion). MIT licensed and free. Install with > `npm install oks-ui`, then `import "oks-ui/styles.css"` once. ## Docs - [Getting started](https://www.oks-ui.com/docs/): what oks-ui is and the tradeoffs it makes. - [Installation](https://www.oks-ui.com/docs/installation/): install the package, import styles once, use a component. No provider, no config. - [Theming](https://www.oks-ui.com/docs/theming/): every color, space, radius, and shadow is an `--oks-*` CSS custom property. Override tokens from your own CSS; point semantic roles (primary/secondary/danger/…) at any palette. - [Use with AI](https://www.oks-ui.com/docs/ai/): how to point an AI assistant at this file and llms-full.txt to build a UI with oks-ui. ## Components - [All components](https://www.oks-ui.com/components/): 45 components across Actions, Feedback, Navigation, Data Display, Data Visualization, Layout & Display, Forms, and Editors. Each has an interactive props playground at `https://www.oks-ui.com/components//`. - Full list with one-line descriptions: [llms-full.txt](https://www.oks-ui.com/llms-full.txt). ## Patterns - [Patterns](https://www.oks-ui.com/patterns/): 20 full product screens assembled from oks-ui, each with a live preview and the complete crawlable source. ## Templates - [Templates](https://www.oks-ui.com/templates/): full applications built entirely on oks-ui — hosted and running live, with the source published for most. Open one to click through the real product; read the code where it is public. ## Features - [Features](https://www.oks-ui.com/features/): what sets oks-ui apart, each with real numbers or a live demo. - [React component library with zero dependencies](https://www.oks-ui.com/features/zero-dependencies/): oks-ui adds one package to your project: no runtime dependencies beyond React, with the real gzip size of each component measured. - [Theme React components with CSS variables](https://www.oks-ui.com/features/css-variable-theming/): Re-theme every component from your own stylesheet with --oks-* CSS custom properties. No provider, no config object, no runtime styling code. - [Accessible React components](https://www.oks-ui.com/features/accessible-components/): Keyboard support, visible focus, ARIA state, focus trapping in overlays and reduced-motion handling in the interactive components, plus the few things that stay your job. - [React charts without a charting library](https://www.oks-ui.com/features/charts-without-a-library/): Seven chart types drawn as interactive SVG by oks-ui itself, with the real gzip size measured and a live demo of each. - [Strict TypeScript React components](https://www.oks-ui.com/features/typescript-react-components/): Written in strict TypeScript, with typed props that turn a wrong variant or a misspelled chart key into a compile error. Real compiler messages shown. - [React components for Next.js and Server Components](https://www.oks-ui.com/features/nextjs/): How oks-ui works in the Next.js App Router, tested in a real Next 16 app: where the client boundary goes, the exact error if you miss it, and the CSS options with measured sizes. - [Build React interfaces with ChatGPT and Claude](https://www.oks-ui.com/features/build-with-ai/): The whole oks-ui API published as plain text, so an AI assistant can read it in one request and write correct code. ## Blog - [Blog](https://www.oks-ui.com/blog/): tutorials and engineering notes — [RSS feed](https://www.oks-ui.com/blog/feed.xml). - [Drawing charts in React with no charting library](https://www.oks-ui.com/blog/react-charts-without-a-charting-library/) - [A zero-dependency React rich text editor: what broke](https://www.oks-ui.com/blog/react-rich-text-editor-no-dependencies/) - [An accessibility audit of oks-ui: what is still open](https://www.oks-ui.com/blog/oks-ui-accessibility-audit/) - [React Modal guide: sizes, closing and backdrop, tested](https://www.oks-ui.com/blog/react-modal-component-guide/) - [Build a file upload field in React, tested in three browsers](https://www.oks-ui.com/blog/react-file-upload-size-type-limits/) - [Build a SaaS settings page in React, tested in three browsers](https://www.oks-ui.com/blog/build-saas-settings-page-react/) - [oks-ui 1.2: what changed and why, measured against 1.1.2](https://www.oks-ui.com/blog/oks-ui-1-2-release/) - [Per-component imports in oks-ui: what they really save, measured](https://www.oks-ui.com/blog/reduce-react-bundle-size-per-component-imports/) - [React server-side sorting table, tested in three browsers](https://www.oks-ui.com/blog/react-table-server-side-sorting-paging/) - [oks-ui 1.2.2: what changed and why, checked against 1.2.1](https://www.oks-ui.com/blog/oks-ui-1-2-2-release/) - [React Button guide: variants, sizes and loading, tested](https://www.oks-ui.com/blog/react-button-component-guide/) - [Build a multi-step form in React, tested in three browsers](https://www.oks-ui.com/blog/react-multi-step-form-with-progress/) - [Getting started with oks-ui in React, tested from scratch](https://www.oks-ui.com/blog/getting-started-with-oks-ui/) - [Build a date range picker in React, tested in three browsers](https://www.oks-ui.com/blog/react-date-range-picker-with-presets/) - [Build an admin dashboard in React, tested in three browsers](https://www.oks-ui.com/blog/build-admin-dashboard-in-react/) - [Accessible React Modal: Focus Trap and Escape Key](https://www.oks-ui.com/blog/accessible-react-modal-focus-trap/) - [Build a login form in React, tested in three browsers](https://www.oks-ui.com/blog/react-login-form-with-validation/) - [Drag-and-drop in the oks-ui Board, tested in three browsers](https://www.oks-ui.com/blog/dependency-free-drag-and-drop-inside-board/) - [Dark mode with no flash, tested in three browsers](https://www.oks-ui.com/blog/dark-mode-with-no-flash/) - [Build a sortable React data table, tested in three browsers](https://www.oks-ui.com/blog/build-a-sortable-selectable-data-table/) - [Theme oks-ui to your brand, tested in light and dark](https://www.oks-ui.com/blog/theme-oks-ui-to-your-brand-in-10-minutes/) ## Answers - [FAQ](https://www.oks-ui.com/faq/): 13 questions — licensing, Next.js / React Server Components support, theming, bundle size, accessibility, versioning. ## Key facts - Package: `oks-ui` on npm — https://www.npmjs.com/package/oks-ui - License: MIT (free for commercial and personal use) - Dependencies: none at runtime beyond `react` / `react-dom` - Requires: React 18 or newer; works with the Next.js App Router - Styling: import `oks-ui/styles.css` once; theme via `--oks-*` CSS variables - Import: named exports, e.g. `import { Button, Modal, Table } from "oks-ui"`