Shadcn/ui is a beautiful, highly customizable component library for React, built on top of Tailwind CSS and Radix UI primitives. It’s perfect for creating modern, accessible UIs that look great out of the box.

Most tutorials assume you’re using Next.js and TypeScript, but what if you want to use Vite and JavaScript? You’re in the right place.

This article will walk you through the complete process of setting up shadcn/ui in a Vite + React project using JavaScript and Tailwind CSS v4.

Prerequisites

Before starting, ensure you have the following installed:

Node.js ≥ 18
npm or yarn or pnpm
Git (used by some commands)

Step 1: Create Your Vite + React Project

Start by creating a new React project using vite. Select the React + JavaScript template:

npm create vite@latest my-shadcn-app

# When prompted:

# > Framework: React

# > Variant: JavaScript

cd my-shadcn-app

npm install

Step 2: Add Tailwind CSS v4

Install Tailwind CSS using the official Vite plugin:

npm install tailwindcss @tailwindcss/vite

This sets you up with Tailwind CSS v4, which includes improved performance and features.

Replace everything in src/index.css with the following:

@import "tailwindcss";

Step 3: Add Path Aliases with jsconfig.json

To simplify your imports and match ShadCN’s convention (@/components/...), create a jsconfig.json file in the root of your project:

{

"compilerOptions": {

"baseUrl": ".",

"paths": {

"@/*": ["./src/*"]

}

}

}

Step 4: Configure Vite

Open vite.config.js and replace its contents with the following:

import path from "path"

import tailwindcss from "@tailwindcss/vite"

import react from "@vitejs/plugin-react"

import { defineConfig } from "vite"

// https://vite.dev/config/

export default defineConfig({

plugins: [react(), tailwindcss()],

resolve: {

alias: {

"@": path.resolve(__dirname, "./src"),

},

},

})

This configures Tailwind, React, and path aliases correctly for shadcn components to work seamlessly

Run the CLI

Run the shadcn init command to setup your project:

npx shadcn@latest init

You will be asked a few questions to configure components.json.

Which color would you like to use as base color? › Neutral

Step 6: Add Your First Component (Button)

Now you can start adding shadcn components.

Let’s add a button:

npx shadcn@latest add button

This command adds the Button component and its dependencies to your src/components/ui/ folder.

Step 7: Use the Button in Your App

Edit your App.jsx to use the new component:

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

function App() {

return (

<Button>Click me</Button>

</div>

)

}

export default App

Run the development server:

npm run dev

You should see your styled shadcn button rendered perfectly.

You’re All Set!

From here, you can add more components just as easily:

npx shadcn@latest add alert

npx shadcn@latest add dialog

# etc.

ShadCN/UI is no longer limited to Next.js or TypeScript. With the latest updates, you can easily use it in any React environment — including Vite + JavaScript.

Have issues or want to see examples of component usage, reach out or check the shadcn documentation.