Installation

Installation

Install Tessina UI and its peer dependencies in your React project.

Using pnpm

pnpm add @tessinaui/ui react react-dom

Using npm

npm install @tessinaui/ui react react-dom

Using yarn

yarn add @tessinaui/ui react react-dom

Setup Tailwind CSS

Tessina UI is built with Tailwind CSS v4. Install Tailwind and the integration for your bundler.

Install Tailwind CSS

For Next.js and other PostCSS setups:

pnpm add -D tailwindcss @tailwindcss/postcss

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

For Vite, install @tailwindcss/vite instead and add tailwindcss() to your Vite plugins.

Import the styles

Add three lines to your global CSS file:

@import "tailwindcss";
@import "@tessinaui/ui/styles.css";
@source "../node_modules/@tessinaui/ui/dist";

• @tessinaui/ui/styles.css is a Tailwind source stylesheet. It carries the design tokens for light and dark, the radius scale, and the --color-* theme map that utilities like bg-primary and text-error resolve against. You don't need a tailwind.config.ts.
• @source tells Tailwind to scan the components for the classes they use. Tailwind skips node_modules by default, so without it the components render unstyled. The path is relative to the CSS file.

Dark mode

Dark mode is class-based. Add the dark class to <html>:

<html lang="en" className="dark">

Install from the registry instead

Every component is also a registry item, which copies its source into your project rather than adding a package. The stylesheet ships the same way, as the base item: the tokens, theme map, variants and utilities of styles.css, merged into your own global CSS.

Register the registry once:

{
  "registries": {
    "@tessina": "https://tessinaui.com/r/{name}.json"
  }
}

Then install base with your first component:

npx shadcn@latest add @tessina/base @tessina/button

• Every component lists base as a dependency, so each later install keeps the stylesheet up to date: npx shadcn@latest add @tessina/card is enough.
• Name base in that first command whenever the app's global CSS already maps colours such as --color-primary to variables of its own, as a project set up with the CLI's init does. The CLI replaces an existing map only for an item named on the command line, never for a dependency.
• A theme installs the same way, and adding more components afterwards leaves it in place.

You're Ready!

You've successfully installed Tessina UI. Now you can start using the components in your project.

Check out the Usage guide to learn how to use components.