🌐 Website: React Tailwind Shadcn OneStepSetup
🔹 Instructions for using the script.
Open your PowerShell terminal, run the script, and enter a project name when prompted. It will then automatically set up everything for you — including Vite, React, TypeScript, TailwindCSS, and Shadcn/UI.
irm "https://raw.githubusercontent.com/shariarratul/react-tailwind-shadcn-OneStepSetup/refs/heads/main/installTailwindShadcnReact.ps1" | iex
Here’s a step-by-step description of what this PowerShell script does:
This PowerShell script automates setting up a React + TypeScript + Vite project with TailwindCSS and Shadcn/UI preconfigured.
-
Prompt for Project Name
- Asks you to enter a project name.
- Example:
my-project
-
Create Vite Project
- Runs
npm create vite@latest <name> --template react-tsto create a React + TypeScript Vite project. - Installs all dependencies with
npm install.
- Runs
-
Install TailwindCSS
- Installs
tailwindcssand its official Vite plugin.
- Installs
-
Setup CSS
-
Replaces
src/index.csswith:@import "tailwindcss";
-
-
Configure
tsconfig.json- Overwrites
tsconfig.jsonto addbaseUrland alias support (@/*→./src/*). - Ensures Vite + TypeScript can use
@imports.
- Overwrites
-
Update
tsconfig.app.json-
Reads the file and ensures
compilerOptionsincludes at the start:"baseUrl": ".", "paths": { "@/*": ["./src/*"] }
-
Also updates TypeScript settings:
target,lib,useDefineForClassFields,module, etc.
-
-
Install Node Types
- Installs
@types/nodefor better TypeScript compatibility.
- Installs
-
Setup
vite.config.ts- Adds aliases (
@ → ./src) and registers React + TailwindCSS plugins.
- Adds aliases (
-
Initialize Shadcn/UI
- Runs
npx shadcn@latest initwith predefined answers to avoid manual prompts. - Sets up Shadcn components inside
@/components.
- Runs
-
Add Shadcn Components
- Installs
button,card, andinputcomponents from Shadcn.
- Installs
-
Enable Dark Mode
-
Modifies
index.html→<html lang="en">becomes:<html lang="en" class="dark">
-
-
Start Dev Server
- Finally runs
npm run devto start Vite’s development server.
- Finally runs
After running this script, you get a fully ready React + TypeScript project with:
- ✅ Vite configured
- ✅ TailwindCSS working
- ✅ Shadcn/UI preinstalled with basic components
- ✅ TypeScript paths (
@/*) enabled - ✅ Dark mode enabled by default
We will be using:
| Websites | Links |
|---|---|
| Flowbite | visit |
| Reui | visit |
| Tailark | visit |
| Motion Primitives | visit |
| Coconut UI | visit |
| Smooth UI | visit |
| Cult UI | visit |
| Patterncraft | visit |
| DaisyUI | visit |
| Chakra UI | visit |
| NextUI | visit |
| Material-UI | visit |
| Aceternity UI | visit |
| Preline UI | visit |
| Franken UI | visit |
| Park UI | visit |
| Mantine | visit |
| Headless UI | visit |
npm create vite@latest my-project
cd my-project
npm install
For Tailwind CSS v4 (latest as of August 2025), use the following. Note: Install as dev dependencies for better practice.
npm install -D tailwindcss @tailwindcss/vite
@import "tailwindcss";{
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.node.json"
}
],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
}
// ...
}
}First, install Node types:
npm install -D @types/node
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"),
},
},
})npx shadcn@latest init
Follow the CLI prompts to configure (e.g., select base color like Neutral). This generates components.json and updates tailwind.config.js (including plugins like @tailwindcss/animate if needed for animations).
npx shadcn@latest add button card input
To enable dark mode by default:
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
</head>
<body>
...
</body>
</html>Note: Fixed import for animations (assuming you want Tailwind Animate; install if needed: npm install -D @tailwindcss/animate and add to tailwind.config.js plugins).
@import 'tailwindcss';
@import '@tailwindcss/animate';
@theme inline {
/* Extend or define custom theme properties here if needed */
}
:root {
/* Default variables */
}
/* Your custom theme: */
.ocean {
--background: oklch(0.96 0.03 230);
--foreground: oklch(0.18 0.05 240);
--card: oklch(0.95 0.02 230);
--card-foreground: oklch(0.18 0.05 240);
--popover: oklch(0.95 0.02 230);
--popover-foreground: oklch(0.18 0.05 240);
--primary: oklch(0.55 0.15 250);
--primary-foreground: oklch(0.98 0.01 230);
--secondary: oklch(0.88 0.05 240);
--secondary-foreground: oklch(0.22 0.06 250);
--muted: oklch(0.92 0.03 240);
--muted-foreground: oklch(0.4 0.07 250);
--accent: oklch(0.78 0.12 260);
--accent-foreground: oklch(0.1 0.02 250);
--destructive: oklch(0.65 0.2 25);
--border: oklch(0.85 0.02 230);
--input: oklch(0.85 0.02 230);
--ring: oklch(0.5 0.15 250);
--chart-1: oklch(0.6 0.15 250);
--chart-2: oklch(0.55 0.18 200);
--chart-3: oklch(0.7 0.14 270);
--chart-4: oklch(0.78 0.12 180);
--chart-5: oklch(0.5 0.2 310);
--sidebar: oklch(0.92 0.02 240);
--sidebar-foreground: oklch(0.18 0.05 240);
--sidebar-primary: oklch(0.55 0.15 250);
--sidebar-primary-foreground: oklch(0.98 0.01 230);
--sidebar-accent: oklch(0.78 0.12 260);
--sidebar-accent-foreground: oklch(0.1 0.02 250);
--sidebar-border: oklch(0.85 0.02 230);
--sidebar-ring: oklch(0.5 0.15 250);
}