Install Vinyaas with Next.js

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

React framework with App Router and Tailwind v4 support.

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

The CLI detects Next.js when next is present. It prefers app/globals.css or src/app/globals.css for theme tokens.

Prerequisites

  • Node.js 20 or newer.
  • TypeScript is recommended (`tsconfig.json`).
  • A package manager lockfile (pnpm, npm, yarn, or bun) before `vinyaas add`.

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: app/globals.css), aliases, components.json, and utils when missing.

Fresh project

Create a new Next.js app with the recommended flags, then initialize Vinyaas.

npx create-next-app@latest my-app \
  --typescript \
  --tailwind \
  --eslint \
  --app \
  --src-dir \
  --import-alias "@/*"

cd my-app
npx vinyaas init
  • Creates the Next.js App Router application.
  • Configures TypeScript, ESLint, and Tailwind.
  • Sets the `@/*` import alias and `src/` layout.
  • Then `vinyaas init` writes theme tokens, `components.json`, and utils.

Existing project

You already have a Next.js app. Run init in the project root.

npx vinyaas init
  • Detects Next.js when `next` is present.
  • Detects TypeScript from `tsconfig.json`.
  • Finds or prefers `app/globals.css` / `src/app/globals.css`.
  • Creates `components.json` when missing; does not overwrite an existing one.

Existing shadcn-style project

Your app already has a UI folder, aliases, or a similar registry layout.

npx vinyaas init
  • Keeps existing structure where possible.
  • Creates or updates Vinyaas configuration (`components.json`, theme tokens) when safe.
  • Does not migrate or rewrite shadcn components automatically.
  • Run `vinyaas init`, then add only the Vinyaas components you need.

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