Tokis – Open Source React Component Library
A zero-runtime, token-based React UI library published on npm with 500+ weekly downloads — built with accessible WAI-ARIA components, CSS custom properties theming, and a tree-shakeable bundle.
Visit websiteOverview
Tokis is an open-source React component library I built and published to npm in 2026. It has grown to 500+ weekly downloads and is designed for teams that want a scalable, token-driven design system without the runtime overhead of CSS-in-JS.
The library is fully written in TypeScript with complete type definitions, documented via Storybook, and targets production-grade design system adoption. Every component follows WAI-ARIA authoring practices to ensure accessibility out of the box.
Design Philosophy
The core principle behind Tokis is zero-runtime theming. Instead of injecting styles at runtime like many CSS-in-JS libraries, Tokis uses CSS custom properties (design tokens) for theming — meaning there is no JavaScript overhead for theme switching and no SSR hydration issues.
Components are designed with a composable API, allowing developers to build complex UI patterns from simple, well-defined primitives. The tree-shakeable bundle ensures that only used components end up in the final build.
Key Features
Accessibility First
Every component implements the relevant WAI-ARIA design pattern — keyboard navigation, focus management, ARIA roles, states, and properties are all handled out of the box. No extra configuration needed to meet WCAG 2.1 AA.
CSS Custom Properties Theming
Themes are expressed entirely through CSS custom properties. Switching themes has zero JavaScript cost, works with SSR without flicker, and makes it trivial to integrate with any existing design token system.
Full TypeScript Support
Every component ships with comprehensive TypeScript definitions. Prop types are designed to be strict yet ergonomic — providing excellent IDE autocomplete and catching errors at compile time rather than runtime.
Tree-Shakeable Bundle
The library is bundled with Vite in library mode, producing ES module output that modern bundlers can tree-shake. Import only what you use — unused components add zero bytes to your production build.
Technical Implementation
The build pipeline uses Vite in library mode to output both ESM and CJS formats, with TypeScript compilation handled by tsc. Storybook is used for interactive component documentation and visual regression testing during development.
The CSS custom properties token system is structured as a flat namespace of semantic tokens (e.g. --color-surface, --color-on-surface) that map to primitive tokens at the theme level. This pattern makes it easy to support multiple themes without duplicating component styles.
Outcomes
Since publishing, Tokis has grown to 500+ weekly downloads on npm and has been adopted by several teams looking for a lightweight, accessible alternative to heavier component frameworks. The Storybook documentation site makes it easy for new adopters to explore components and understand their API.
Building Tokis deepened my understanding of component API design, CSS architecture at scale, accessibility patterns, and the open-source publishing workflow — from semantic versioning and changelogs to npm distribution and community issue triage.