@tokis/tokis

Performance-first, token-native UI design system for React.

This is the meta-package — installing @tokis/tokis gives you everything:

Package	Description
`@tokis/react`	React components, hooks, and theming context
`@tokis/theme`	Precompiled CSS — variables, reset, component styles
`@tokis/core`	Headless primitives — state machines, a11y, focus management
`@tokis/tokens`	Design token definitions — TypeScript + JSON + CSS variables
`@tokis/icons`	Tree-shakable SVG icons, optional lucide-react bridge

Quick Start

npm install @tokis/tokis

import '@tokis/theme';
import { ButtonRoot, ButtonLabel, ThemeProvider } from '@tokis/tokis';

function App() {
  return (
    <ThemeProvider>
      <ButtonRoot variant="primary">
        <ButtonLabel>Get Started</ButtonLabel>
      </ButtonRoot>
    </ThemeProvider>
  );
}

Install Individual Packages

If you only need specific parts of @tokis/tokis:

# React components with all peer dependencies
npm install @tokis/react @tokis/theme @tokis/core @tokis/tokens

# Just the headless core (framework-agnostic)
npm install @tokis/core

# Just the design tokens
npm install @tokis/tokens

# Just the theme CSS
npm install @tokis/theme

Features

Zero Runtime CSS — No CSS-in-JS overhead. Precompiled static CSS.
Token-Native — Every value is a CSS custom property. Theming is predictable.
Designed for Accessibility — Following WAI-ARIA Authoring Practices, targeting WCAG 2.2 Level AA. Keyboard navigation and focus management built-in.
Composable — Compound component patterns. No prop explosion.
Dark Mode — First-class light/dark support via ThemeProvider.
TypeScript — Full type safety with exported interfaces for every component.
Tree-Shakeable — ESM + CJS dual publish. Only ship what you use.

Documentation

Visit Tokis Documentation for the full documentation, interactive demos, and API reference.

License

MIT