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

> Learn to set up shadcn/ui with Nextjs Vite and Remix using the shadcn CLI. This guide simplifies configuration for your JavaScript framework projects.

- Repository: [shadcn-ui/ui](https://github.com/shadcn-ui/ui)
- Tags: how-to-guide
- Published: 2026-02-26

---

**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`](https://github.com/shadcn-ui/ui/blob/main/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`](https://github.com/shadcn-ui/ui/blob/main/templates/vite-app/vite.config.ts) with the Tailwind plugin and [`templates/vite-app/package.json`](https://github.com/shadcn-ui/ui/blob/main/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`](https://github.com/shadcn-ui/ui/blob/main/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`](https://github.com/shadcn-ui/ui/blob/main/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`](https://github.com/shadcn-ui/ui/blob/main/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:

```bash

# 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`](https://github.com/shadcn-ui/ui/blob/main/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`](https://github.com/shadcn-ui/ui/blob/main/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`](https://github.com/shadcn-ui/ui/blob/main/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.