The design system behind everything UnityEvolv builds.
UnityKit is the shared React component library our products are built from, on Tailwind CSS v4 and daisyUI 5. It ships components, a theme and its tokens, in light and dark, and knows nothing about any app that uses it. This website is built with it.
- Install
- npm i @unityevolv/unitykit
- Licence
- MIT
- Built on
- Tailwind CSS v4, daisyUI 5
- Themes
- Light and dark, contrast checked in CI
- Tokens
- CSS and JSON, for anything not React
Thirty-odd components, from buttons and badges to tables, steppers, drawers and date pickers, each with its own tests and a page in the Storybook you can open and poke at.
The palette is two hues and the status colours, deliberately. A third accent dark enough to carry white text lands in the band the warning colour already holds, so the kit refuses to pretend it is a different colour — and the daisyUI accent is aliased to primary so nobody can smuggle one in.
It is published to npm with provenance and versioned with changesets, so upgrading is a decision you make rather than something that happens to you.
What it does
Contrast is a build gate
Every colour pair is checked for WCAG AA in both themes, hover states included. A colour that breaks it fails the pull request.
Invalid combinations do not compile
Variants are declared in one config and the prop types come from it, so a size or colour that does not exist is a type error, not a class name that silently produces no CSS.
Tokens as plain data
The palette is published as JSON as well as CSS, so a native app, a design tool or an email template can read it with no build step.
Who it is for
- React teams who want a design system without building one first.
- Anyone who has watched an interface drift out of its own palette over a year.
- Designers who would rather read the tokens than guess at them.
Questions
Licence
MIT.
Questions about UnityKit?
Tell us what you are trying to do and we will tell you whether this is the thing for it.