v0.1 · MIT · React 18 and 19
Components you can theme in one line — or take with you.
23 accessible React components built on Tailwind CSS. Every token is a CSS variable, so a rebrand is a declaration rather than a fork — and every component can be copied into your own tree without giving up upgrades.
- Components
- 23Components
- CSS import to set up
- 1CSS import to set up
- Third-party runtime deps
- 3Third-party runtime deps
- Contrast, gated at build
- AAContrast, gated at build
- Installs from npm
- 104Installs from npm
Quick start
Two lines to a working install
No provider, no config file, no Tailwind extend block.
1 · Add the package
pnpm add @noksha-ui/react2 · Import the stylesheet
/* app.css */
@import 'tailwindcss';
@import '@noksha-ui/react/styles.css';
That is the whole setup. The rest — Tailwind v3, the no-flash script, and calling a component from a Server Component — is on Installation.
Why this one
Four decisions the rest of the library follows from
Theming with no provider
Every token is a plain CSS custom property. Rebranding the whole library is one declaration, and there is no context to wrap your app in.
One CSS block, not a forkNothing at runtime
Classes resolve at build time and the stylesheet is generated from the token engine. No CSS-in-JS, and no style recalculation on render.
Zero style work per renderAccessibility written, not borrowed
The focus trap, the dismiss stack, roving focus and typeahead are all in-house and all under test. Only the collision geometry is a dependency.
Every component run through axeInstall it, or own it
Use the package, or copy any component into your own tree and keep it. Unlike copy-paste libraries, a diff still tells you what moved upstream.
noksha diff, after you own itHow the theming works
One hex value becomes the whole library
These swatches were generated by the token engine during this build — not sampled from a screenshot.
#6366F1#71717A1Seed
One brand colour
A single hex value is the entire input. Nothing else is configured.
2Scales
Eleven perceptual steps
Generated in OKLCH, so the steps are evenly spaced to the eye rather than to the maths.
3Semantics
Meaning, not numbers
Steps become roles — surface, border, solid, ink — twice over: once for light, once for dark.
4Contrast gate
Checked at build
Every text pairing is measured against WCAG AA. A seed that cannot carry readable text fails the build instead of shipping.
Change the seed and every component moves with it. Try it in the theme builder.
How it compares
The trade you normally have to make
Install-and-go libraries keep the source; copy-paste libraries lose the upgrade path. This is an attempt at both columns.
| Capability | MUI | Ant Design | shadcn/ui | Noksha UI |
|---|---|---|---|---|
| Install and go | yes | yes | no | yes |
| Own the source | no | no | yes | yes |
| Zero runtime CSS-in-JS | no | no | yes | yes |
| Theming with no provider | no | no | no | yes |
| Perceptual colour scales | no | no | no | yes |
| Upgrade diffs after you copy | no | no | no | yes |
Scope
What is deliberately not here
No opinionated brand
Noksha is not one company’s design system with the name filed off. The default seed is a starting point, not a house style.
Tailwind stays the styling layer
This is a component library, not a CSS framework. Utilities remain how you adjust anything.
No legacy browsers
The baseline is oklch() and :has() — Chrome 111+, Safari 16.4+, Firefox 113+.
Data components are v0.2
DataTable, DatePicker, Combobox and the command palette are the next milestone, not this one.
Next