Installation

Install the package, then point Tailwind at it. Both steps are required — skipping either installs cleanly and then renders with no styling at all.

1. Install

$ npm install trivela-ui

React 18 or 19 is a peer dependency. The choice above applies to every command on this page.

2. Wire up Tailwind

Components are written with classes like bg-primary-500. Tailwind only emits a class it can find as literal text, and it only knows primary is a colour if the scale is registered. Both halves matter.

Tailwind v4

Three lines of CSS, no JavaScript config. theme.css declares the palette in @theme, which registers the colour names and emits the tokens; @source points the scanner at the installed components.

app.css

/* app.css */
@import "tailwindcss";
@import "trivela-ui/theme.css";
@source "../node_modules/trivela-ui/dist";

The @source path is relative to that CSS file — adjust the ../ to match where yours lives.

Tailwind v3

layout.tsx

// app/layout.tsx — or wherever your global CSS lives
import 'trivela-ui/styles.css';

tailwind.config.js

// tailwind.config.js
module.exports = {
  presets: [require('trivela-ui/tailwind-preset')],
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/trivela-ui/dist/**/*.js', // required — see the note
  ],
};

That second content line is not optional. Tailwind v3 does not merge contentfrom a preset — your own array replaces the preset's entirely. Leave it out and Tailwind never reads the shipped components: every class inside them is dropped, and the only clue is a generic “no utility classes were detected” warning.

Usage

example.tsx

import { Button } from 'trivela-ui';

export function Example() {
  return <Button color="primary">Click me</Button>;
}

Most components take variant (solid, outline, ghost, subtle) and color (primary, secondary, success, warning, danger, info, neutral). A few deliberately do not — each component page says which.

Or copy the source

Prefer to own the code? The CLI copies a component into your project instead of installing a dependency, so you own the file and can edit it freely.

Terminal

$ npx trivela-ui add button

Theming

The tokens are plain custom properties, so overriding them re-themes every component at once.

globals.css

:root {
  --color-primary-500: #7c3aed;
  --color-primary-700: #5b21b6;
}

See the color system for the full scale.

Client components

Autocomplete, Dialog, AlertDialog, Tooltip and ToastProvider hold state or use hooks, and carry 'use client'. They can be imported from a server component; they just cannot render on the server. Everything else is server-safe.

Toasts

Toast on its own is an inline panel. For one that floats, wrap the app once.

app.tsx

import { ToastProvider, useToast } from 'trivela-ui';

function App({ children }) {
  return <ToastProvider position="bottom-right">{children}</ToastProvider>;
}

function SaveButton() {
  const { toast } = useToast();
  return (
    <Button onClick={() => toast({ color: 'success', icon: true, title: 'Saved' })}>
      Save
    </Button>
  );
}