oks-uiThe whole product UI, already built.
Strict-TypeScript React components, complete apps made only from them, and zero runtime dependencies. Theme it with CSS variables.
- 45components
- 6full apps
- 763screens
- 0dependencies
- MITlicensed
Wednesday
Overview
| Category | value |
|---|---|
| W1 | $21.4K |
| W2 | $24.8K |
| W3 | $22.6K |
| W4 | $29.9K |
| W5 | $27.3K |
| W6 | $34.8K |
| W7 | $31.5K |
| W8 | $38.9K |
| W9 | $35.6K |
| W10 | $33.1K |
| W11 | $41.2K |
| W12 | $48.2K |
Sara Whitfield
Astrobit
Marcus Lee
Bilkoss
Priya Nair
Cearix
Most component libraries hand you buttons and leave you the rest. oks-ui ships 45 components, 6 complete apps built only from them, and 763 real screens to prove it. No provider, no config, and nothing else in your bundle.
Make it yours.
Every colour, radius and shadow is a CSS custom property. Change two of them below and the whole app follows. There is no provider to wrap and nothing to configure.
Accent
:root {
--oks-color-primary-500: #fe6601;
--oks-radius-md: 8px;
}Workspace settings
Changes save to every member.
Everything the product needs, in the box
Charts, tables, forms, boards, overlays, a command palette. Try them. These are the actual components.
Charts
Line, area, bar, column, pie and donut. Every point is reachable from the keyboard.
| Category | signups |
|---|---|
| Jan | 42 |
| Feb | 58 |
| Mar | 51 |
| Apr | 67 |
| May | 83 |
| Jun | 96 |
| Category | Value | Share |
|---|---|---|
| Search | 46 | 46% |
| Direct | 28 | 28% |
| Social | 16 | 16% |
| 10 | 10% |
Forms
Twelve field types, with labels, hints and errors built in.
Tables
Click a header to sort. Selection, paging and expandable rows are built in.
| Astrobit | Business | $1,200 |
| Cearix | Business | $900 |
| Bilkoss | Pro | $480 |
| Dyloc | Starter | $90 |
Boards
Drag a card to another column, or move it with the keyboard.
- Design the settings page
- Write the migration guide
- Wire up the billing form
- Ship dark mode
Command palette
Press the bar, or press Cmd K. It searches this site and navigates it.
Press ⌘K or click the bar — the real CommandPalette opens and actually navigates this site. Fuzzy search, full keyboard control, focus trap and backdrop, all from a single isOpen boolean.
Toasts and dialogs
Notifications and modals with focus trapping and focus restore.
6 real applications, built only with oks-ui
Pick one and click through it. They are running live, and most publish their source.
Astrobit
Dark-first analytics workspace
- Analytics
- Dark UI
- Charts
- Command palette
- Screens
- 166
- oks-ui components
- 33
Built the way teams ship
Small imports, strict types, and nothing to wrap your app in.
import { Button } from "oks-ui/button";
import { Chart } from "oks-ui/chart";
import "oks-ui/button.css";
import "oks-ui/chart.css";
export const Revenue = ({ data }) => {
return (
<>
<Chart
type="column"
data={data}
x="week"
series="value"
ariaLabel="Weekly revenue"
/>
<Button color="primary">Export</Button>
</>
);
};Zero runtime dependencies
Only react and react-dom as peers. Nothing else reaches your bundle.
Strict TypeScript, start to finish
Complete types for every prop, and a plain JavaScript project works the same.
Import only what you use
Per-component entries such as oks-ui/button bring in one component and its CSS.
Accessible on purpose
Keyboard paths, focus handling and ARIA are built into the interactive components.
Themed with CSS variables
Override a token in your own stylesheet. No provider, no config object.
Readable by your AI assistant
llms.txt and llms-full.txt describe every component and token in plain Markdown.
Always shipping
The last releases, straight from the changelog.
v1.5.0
22 October 2026
- DiffView (oks-ui/diff-view) compares two texts line by line, side by side or in one column, with the changed words hi...
- ColorPicker and ColorField (oks-ui/color-picker): a saturation and brightness area, hue and transparency sliders, a t...
- CodeField (oks-ui/code-field), a text field for code and settings with highlighting, line numbers, Tab and Shift+Tab...
- Sortable (oks-ui/sortable) puts the items of a list, row or grid in a new order with a pointer, a finger (hold, then...
- Draggable and DropZone (oks-ui/drop-zone) move things into an area, such as a block from a palette onto a page column...
- MediaLibrary (oks-ui/media-library), a grid of images and files to pick from: search, type filters, one or many picks...
- TreeView rows can be moved
- LocaleProvider and useLocale (oks-ui/locale, also in oks-ui)
v1.4.1
5 October 2026
- New component: TreeView
- New component: Rating
- TextEditor: custom CSS classes on a block, and an Edit / Preview switch
- Chart type="sparkline": a small trend for a table cell or a stat card: no axes, grid, legend, title, toolbar or card...
- Chart type="combo": columns, lines and areas on one set of categories
- Chart: reference lines, axis titles, a time axis and stacked areas
- Chart: a colour key for heatmaps and value labels on lines
- Chart: a data table for screen readers, and a labels prop
v1.3.2
3 October 2026
- Secondary text and the selected Nav item now meet WCAG AA contrast on tinted surfaces
Questions, answered
The short versions. The rest are on the FAQ page.
What is oks-ui?
oks-ui is a React component library written in strict TypeScript, with a design system driven entirely by CSS custom properties. It ships 45 components — buttons, modals, drawers, forms, tables, charts, toasts, a command palette, a Kanban board, a block editor and more — has zero runtime dependencies beyond React, needs no theme provider or configuration, and has keyboard support, visible focus, ARIA roles and reduced-motion handling built into its interactive components. It is open source under the MIT License.
Is oks-ui free? What license is it under?
Yes, oks-ui is free. The package is open source under the MIT License, which permits use in personal and commercial projects at no cost. The documentation website's terms apply only to the site, not to your use of the package.
How do I install oks-ui?
Run `npm install oks-ui` (or `pnpm add oks-ui` / `yarn add oks-ui`). Import the stylesheet once in your app entry or root layout with `import "oks-ui/styles.css"`. Then import components as named exports, for example `import { Button } from "oks-ui"`. There is no provider to add and no configuration step.
Does oks-ui work with Next.js and React Server Components?
Yes. oks-ui works with the Next.js App Router. Since oks-ui 1.3.1 the per-component entries (oks-ui/button, oks-ui/modal, and so on) are marked as client components, so you can import them straight into a Server Component and Next.js still prerenders their initial HTML. The exceptions are oks-ui/text-editor and oks-ui/pagination, which also export plain functions a server can call, and the main oks-ui entry: import their components only inside a file that starts with "use client". On oks-ui 1.2.x no entry is marked, so add "use client" to every file that renders a component.
Does oks-ui need a provider or configuration?
No. There is no theme provider, no configuration object, and no required setup beyond importing the stylesheet once. The one exception is Toast, which uses its own provider to manage the notification queue.
How do I theme oks-ui or change its colors?
Every color, space, radius and shadow is an --oks-* CSS custom property. Override any token from your own CSS with no build step or config file, for example `:root { --oks-color-primary-500: #7c3aed; }`. Semantic roles such as primary, secondary, success, warning and danger are aliases you can point at any built-in palette or your own scale. Dark mode is driven by a data-theme="dark" attribute on the html element.