Install Vinyaas with React + Vite

Install Vinyaas components in React + Vite projects with Tailwind CSS v4. Components are copied in as source you own and edit.

Vite + React apps with a CSS entry such as src/index.css.

Choose another guide from Installation. The CLI package is on npm as vinyaas.

The CLI detects Vite when vite is present. CSS entry detection looks for src/index.css, index.css, or existing app globals.

Prerequisites

  • Node.js 20 or newer.
  • Tailwind CSS v4 on your CSS entry before or right after init.
  • An `@/*` path alias in `tsconfig.json` or `jsconfig.json`.
  • A package manager lockfile in the project root.

Install the CLI globally (recommended), or run once with npx / pnpm dlx / yarn dlx / bunx.

npm install -g vinyaas

Choose your setup

Pick the path that matches your project. Every path ends with vinyaas init, which prepares theme tokens (preferred CSS: src/index.css), aliases, components.json, and utils when missing.

Fresh project

Scaffold Vite + React + TypeScript, install dependencies, add Tailwind v4, then initialize Vinyaas.

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npx vinyaas init
  • Creates a Vite + React + TypeScript application.
  • Install project dependencies, then wire Tailwind CSS v4 to `src/index.css`.
  • Ensure an `@/*` alias exists before or during init.
  • Then `vinyaas init` configures theme tokens, `components.json`, and utils.

Existing project

You already have a Vite + React app. Run init from the project root.

npx vinyaas init
  • Detects Vite when `vite` is present.
  • Detects TypeScript from `tsconfig.json`.
  • Looks for `src/index.css`, `index.css`, or existing app globals.
  • Creates `components.json` when missing; does not overwrite an existing one.

Existing shadcn-style project

Your Vite app already follows a shadcn-style components layout.

npx vinyaas init
  • Keeps existing structure where possible.
  • Creates or updates Vinyaas configuration when safe.
  • Does not migrate existing UI files automatically.
  • Run `vinyaas init`, then `vinyaas add` for the components you want.

Add components

After init, vinyaas add copies registry source into components/ui/<name>/. Files stay editable. Registry dependencies resolve automatically and only missing npm packages are installed. Pass multiple names to install together; use --force to overwrite existing files. Use --dry-run to preview, or --category to install a registry category group. See the CLI guide for confirmation, status, and discovery commands.

npx vinyaas add button
npx vinyaas add --category forms --yes

Import components

Import the component directory after install:

import { Button } from "@/components/ui/button"

Default file layout:

bash
components/ui/button/index.tsx
components/ui/toast/index.tsx
components/ui/toast/toast.css

Discover components

Browse the catalog without writing files. Useful before you decide what to add. Each command accepts --json.

npx vinyaas list
npx vinyaas info button

Continue building