Install and run

Before you start

This page describes the React edition on Tailwind CSS, Pro tier, at v1.66. The commands are the ones in your download's own README.md, and they were run against that artifact.

• Node 20 or newer. Check with node --version.
• A package manager. No lockfile ships and nothing pins one, so npm, pnpm, yarn and bun all work.
• Nothing else. No account, no API key, no network call at runtime. The screens run on demo data until you connect your own.

Run it

There is no package to add. VuiAdmin ships as source, so what you downloaded is the whole project: the screens, the components and the theme, already wired together.

unzip viliha-admin-nextjs-tailwind-voilet-pro-0.1.0.zip
cd viliha-admin-nextjs-pro
npm install
npm run dev

Check it worked

Open http://localhost:3000. Three things tell you the install is sound, and it is worth taking ten seconds over them rather than discovering the third one an hour later.

• The dashboard renders with styling. Cards, a sidebar, colour. Unstyled text on a white page means Tailwind is not seeing the components, which is the first symptom below.
• The sidebar navigates. Every entry opens a screen. There are 126 of them.
• Dark mode switches. The toggle in the header. If it changes nothing, the theme stylesheet is not loading.

What is in the folder

Four directories matter, and the rest is an ordinary Next.js application you already know how to read.

app/                 The screens, grouped by Next route group
  (shell)/           Everything behind the sidebar
  (auth)/            Sign in, sign up, password recovery
  nav.ts             The sidebar. Adding a page means adding a row here
src/vui/             The theme itself, one file per component family
  theme.css          Every design token
docs/                The guides, offline
agent/               A machine-readable description of the theme, for coding agents
AGENTS.md            The rules a coding agent follows in this project

Where the components are

Every component family is a file in src/vui/, and you import it through an alias the project's tsconfig.json already sets.

import { Button } from "@viliha/vui-react/button";
import { DataTable } from "@viliha/vui-react/data-table";

The alias points at src/vui/. Nothing resolves to a package on a registry, which is why moving that folder is one line in tsconfig.json rather than an edit to every file that imports from it.

Bringing it into a project you already have

The download is a whole application because that is the fastest way to see the product. If you have an application already, take three things across.

• src/vui/ in full. The components import each other, so a single family taken alone will not compile.
• src/vui/theme.css, imported once from your global stylesheet. It carries the tokens every component reads.
• The alias, so the import lines in this documentation work unchanged.

{
  "compilerOptions": {
    "paths": {
      "@viliha/vui-react/*": ["./src/vui/*"]
    }
  }
}

@import "tailwindcss";
@import "@viliha/vui-react/theme.css";

/* Tailwind must be told to scan the components, or every class they use is
   treated as unused and stripped from the build. */
@source "../src/vui";

When it did not work

The page renders, with no styling at all

Cause: Tailwind finds classes by scanning source text, and it is not looking inside src/vui/. Every class the components use is considered unused and stripped, so the build succeeds and the page is bare HTML. Fix: add the @source line above to your global stylesheet. Verify: the dashboard cards regain their border and background.

Cannot find module '@viliha/vui-react/button'

Cause: the paths alias is missing, or src/vui/ was moved without updating it. There is no package by that name on any registry, so the alias is the only thing that resolves it. Fix: add or correct the alias in tsconfig.json. Verify: your editor resolves the import and npx tsc --noEmit is clean.

Port 3000 is already in use

Cause: something else is on it. Fix: npm run dev -- --port 3001. Verify: the dashboard opens on the new port. Nothing in the project hardcodes 3000.

Install fails on an engine or syntax error

Cause: Node is older than 20. Fix: upgrade. Verify: node --version reports 20 or higher, then npm install again.

Next

The application runs and every screen is in place. The next thing worth doing is making it look like yours, which is one file: Theming covers the tokens. If you are here to point a coding agent at it instead, go to Building with AI agents.