Trivela UI
A React component library with one consistent design system
27 components built on Tailwind CSS, sharing a single set of variant and colour tokens. Accessible by construction, themeable at runtime, and available either as a package or as source you own.
Install
Pick your package manager — the choice carries across every command in these docs.
$ npm install trivela-uiInstalling is only half of it — Tailwind still has to be pointed at the package, or the components arrive unstyled. Read the full setup.
The same two props, everywhere
Four variants across seven semantic colours, backed by a nine-step scale. Every component draws from it, so a danger button and a danger alert are the same red.
How it is built
One API across every component
Button, Alert, Badge, Card, Table and the rest all read the same variant and color props from a single source. Learn it once and it holds everywhere — no per-component vocabulary to memorise.
Themed by CSS variables, not a rebuild
Every colour resolves to a custom property. Override a handful of values and the whole system follows — at runtime, with no config edit and no recompilation.
Native elements where they win
Dialog is built on <dialog>, so the focus trap, Escape, inert background and top layer come from the browser. Accordion uses <details>. Checkbox and Radio use accent-color. Less code to go wrong, better behaviour for free.
Install it, or own it
Add the npm package and move on, or copy a component into your project with the CLI and edit it like your own file. The same source backs both.