Install Vinyaas with React

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

Other React projects that already use Tailwind CSS v4.

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

Generic React is the fallback when neither next nor vite is detected. Ensure a supported CSS entry exists before running vinyaas init.

Prerequisites

  • `react` and `react-dom` declared in the project.
  • Tailwind CSS v4 (v3 is not supported).
  • A global stylesheet such as `app/globals.css`, `src/app/globals.css`, `src/index.css`, or `index.css`.
  • An `@/*` path alias and a package manager lockfile.

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 any React app that meets the prerequisites, then initialize Vinyaas. There is no single create command for every React toolchain.

npx vinyaas init
  • Create your React app with your preferred bundler or template.
  • Add Tailwind CSS v4 and a global stylesheet.
  • Configure an `@/*` path alias.
  • Then `vinyaas init` prepares the registry config and theme tokens.

Existing project

Your React app already has React, Tailwind v4, and a stylesheet. Run init in the root.

npx vinyaas init
  • Used when neither `next` nor `vite` is detected.
  • Detects TypeScript from `tsconfig.json` when present.
  • Finds a supported CSS entry among the known candidates.
  • Creates `components.json` when missing; does not overwrite an existing one.

Existing shadcn-style project

Your React app already uses a similar UI registry layout.

npx vinyaas init
  • Keeps existing folders and aliases where possible.
  • Creates or updates Vinyaas configuration when safe.
  • Does not migrate components from another registry automatically.
  • Run `vinyaas init`, then add Vinyaas components as needed.

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