How to Set Up shadcn/ui with Different JavaScript Frameworks: Next.js, Vite, and Remix

You can set up shadcn/ui with Next.js, Vite, Remix, or TanStack Start using the npx shadcn CLI, which either bootstraps a new project from framework-specific templates or detects your existing framework and configures Tailwind CSS automatically.

The shadcn/ui CLI provides a unified workflow for initializing component libraries across multiple JavaScript frameworks. Whether you are starting fresh or integrating into an existing codebase, the CLI handles framework detection, template extraction, and Tailwind configuration by analyzing your project structure and dependencies.

Bootstrapping a New Project with shadcn create

The npx shadcn create command scaffolds a complete project using framework-specific starter templates stored in the repository's templates/ directory.

How the CLI Handles Project Creation

When you run the create command, the CLI executes createProject() from packages/shadcn/src/utils/create-project.ts. This function performs the following operations:

1. Prompts you to select a framework template (next, next-monorepo, vite, or start)
2. Downloads the repository archive from https://codeload.github.com/shadcn-ui/ui/tar.gz/main
3. Extracts the corresponding sub-folder from ui-main/templates/ (e.g., vite-app, monorepo-next, start-app)
4. Installs dependencies using your selected package manager and initializes a Git repository

Next.js App Router Setup

To set up shadcn/ui with Next.js App Router, select "Next.js" or "Next.js (Monorepo)" during the prompt. The CLI extracts templates/monorepo-next, which includes a pre-configured App Router structure with the app/ directory.

The generated project includes templates/monorepo-next/apps/web/next.config.mjs with optimized settings for React Server Components. After creation, your project structure contains:

my-app/
 ├─ app/                # App Router pages

 ├─ components/         # shadcn/ui components (after adding)

 ├─ tailwind.config.cjs
 ├─ next.config.mjs
 └─ package.json

Vite Setup

Select "Vite" to scaffold a Vite-based React project. The CLI extracts templates/vite-app, which contains a standard Vite + React + Tailwind configuration.

Key configuration files include templates/vite-app/vite.config.ts with the Tailwind plugin and templates/vite-app/package.json defining the Vite dependencies. This template provides a lightweight alternative to Next.js for single-page applications.

TanStack Start Setup

Select "TanStack Start" to initialize a full-stack React project. The CLI extracts templates/start-app, which includes the required @tanstack/react-start dependencies as defined in templates/start-app/package.json.

This template configures the TanStack Start framework with file-based routing and server-side rendering capabilities, pre-integrated with Tailwind CSS and the shadcn/ui component structure.

Adding shadcn/ui to Existing Projects

If you already have a project running Next.js, Vite, Remix, or TanStack Start, you can integrate shadcn/ui without creating a new project.

Framework Detection Logic

The CLI determines your framework by scanning configuration files and dependencies using getProjectInfo() from packages/shadcn/src/utils/get-project-info.ts. This function returns a ProjectInfo object that tells the CLI how to configure Tailwind and where to place components.

Detection rules for specific frameworks:

Framework	Detection Method	Source Location
Next.js	Presence of next.config.* and check for app/ directory (isUsingAppDir)	Lines 83-89 in get-project-info.ts
Vite	Presence of vite.config.*	Lines 44-48
Remix	Dependency starting with @remix-run/ (e.g., @remix-run/react)	Lines 14-20
TanStack Start	Dependency @tanstack/react-start	Lines 24-32

When Remix is detected, the CLI sets type.framework to the Remix configuration and installs the appropriate Tailwind setup, placing components in the app/components/ui/ directory (or src/components/ui/ if using a src/ folder).

Installation Commands

To add shadcn/ui to an existing project:

# Initialize shadcn/ui (installs Tailwind, cn utility, base colors)

npx shadcn init

# Add specific components

npx shadcn add button
npx shadcn add card dialog

The init command automatically detects your framework using the logic described above and configures the project accordingly. For Next.js App Router projects, it enables React Server Components support (isRSC = true). For Vite and Remix, it configures the appropriate Tailwind content paths.

Summary

• Use npx shadcn create to bootstrap new projects with pre-configured templates for Next.js App Router, Vite, TanStack Start, or Next.js Monorepo setups.
• The CLI downloads framework-specific templates from templates/ (e.g., vite-app, monorepo-next, start-app) and extracts them to your project directory.
• For existing projects, use npx shadcn init to automatically detect your framework (Next.js, Vite, Remix, or TanStack Start) via getProjectInfo() in packages/shadcn/src/utils/get-project-info.ts.
• The detection logic scans for next.config.*, vite.config.*, @remix-run/* dependencies, or @tanstack/react-start to determine the correct configuration.
• After initialization, add components with npx shadcn add <component> to install the code into your project's components/ui/ directory.

Frequently Asked Questions

Can I use shadcn/ui with Remix?

Yes, shadcn/ui fully supports Remix. When you run npx shadcn init in a Remix project, the CLI detects the @remix-run/react dependency (as implemented in packages/shadcn/src/utils/get-project-info.ts lines 14-20) and configures Tailwind CSS to work with Remix's routing structure. Components are installed to app/components/ui/ by default.

What is the difference between shadcn create and shadcn init?

npx shadcn create bootstraps a brand-new project from scratch using framework-specific templates stored in the templates/ directory (such as templates/vite-app or templates/monorepo-next). It downloads the repository archive, extracts the template, and initializes a Git repository. In contrast, npx shadcn init is used in existing projects to detect the current framework, install Tailwind CSS configuration, and prepare the project structure for adding components.

Does shadcn/ui support the Next.js Pages Router?

While the shadcn create command primarily scaffolds Next.js projects using the App Router (via templates/monorepo-next), you can use shadcn/ui with the Pages Router by running npx shadcn init in an existing Next.js project. The detection logic in packages/shadcn/src/utils/get-project-info.ts identifies Next.js projects by looking for next.config.* files and checks for the App Router by detecting the app/ directory (isUsingAppDir). If no app/ directory exists, the CLI configures the project for the Pages Router instead.

Where are the starter templates stored?

The starter templates are stored in the templates/ directory of the shadcn-ui/ui repository on GitHub. When you run npx shadcn create, the CLI downloads the repository archive from https://codeload.github.com/shadcn-ui/ui/tar.gz/main and extracts the appropriate sub-folder (such as templates/vite-app, templates/monorepo-next, or templates/start-app) to your local machine. This ensures you always receive the latest, officially maintained starter configuration for your chosen framework.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}