Kipui

Introduction

What this library is, what it deliberately is not, and the three properties that follow from theming with CSS variables.

What it is

Kipui is 24 React components in one package. Install kipui, add two lines to your stylesheet, and import components by name. Upgrades are a version bump, and the whole library moves together rather than component by component.

Everything is built on React and Tailwind CSS and nothing else. There is no styling runtime, and no provider you have to wrap the app in before a component will render — the only global you may want is ToastProvider, and only if you use toasts.

How it works

Three properties follow from theming with CSS variables instead of a config file. They are the whole idea.

  • The styling is legible. Every component is Tailwind classes reading from CSS variables. If you can read the class list you can change the design, and your existing tokens are what it resolves against.
  • Re-theming is a handful of variables. Redeclare --primary and the rest after the theme import and every component follows. There is no theme object to construct and no provider to thread it through.
  • The props are flat and named. variant, size, rounded, elevation — spelled the same on every component that has them, and typed, so the editor lists the options instead of you reading source.

What's inside

24 components in 5 groups, five palettes in light and dark, and one token set that drives all of it.

GroupCountComponents
Forms8Button, Calendar, Checkbox, Input, Radio group, Select, Switch, Textarea
Data display6Avatar, Badge, Kbd, Separator, Skeleton, Table
Feedback5Alert, Dialog, Drawer, Toast, Tooltip
Navigation5Accordion, Breadcrumb, Dropdown, Pagination, Tabs

What it is not

Being clear about the boundary saves you an afternoon. Kipui has no opinion about anything outside the component:

  • Not a design system. It ships defaults, not a brand. The palettes are starting points you are expected to replace with your own values.
  • Not a framework integration. Nothing imports a router, a data layer or a form library, so nothing here decides which of those you use.
  • Not a service. Nothing is fetched at runtime and nothing phones home. The package on npm is the whole of it; this site only documents it.

One consequence worth knowing up front

Because the components live in node_modules, changing one means a prop or a className rather than an edit. Every component takes className last so your classes win, and the tokens are there for anything broader — but if you need to rewrite a component's internals, this is not the library for that.

Where to go next

The rest of the guides in reading order, or jump straight to the reference.

InstallationThe three peer dependencies, the two lines your stylesheet needs, and the import that follows.Quick startInstall, render, declare your own colours, and wire light and dark — the whole path in five steps.ConventionsThe four API rules every component keeps, so learning one component teaches you all twenty-four.ThemingHow a palette, a mode and a shape scale resolve into the classes the components are written in.Your own themeBuild a palette from one brand colour, watch it on real components in both modes, and copy back only the tokens you changed.TokensEvery variable the library reads: colour, radius, shadow, typography, spacing and z-index.Dark modeTwo independent axes, one class on the root, and the blocking script that stops the wrong theme flashing.AccessibilityWhat every component guarantees about focus, keyboard, labelling and contrast — and what stays your job.MotionThe easing set, the duration knob, and how reduced motion is honoured without disabling feedback.