1#!/bin/bash
2 
3# Exit on error
4set -e
5 
6# Detect Node version
7NODE_VERSION=$(node -v | cut -d'v' -f2 | cut -d'.' -f1)
8 
9echo "🔍 Detected Node.js version: $NODE_VERSION"
10 
11if [ "$NODE_VERSION" -lt 18 ]; then
12  echo "❌ Error: Node.js 18 or higher is required"
13  echo "   Current version: $(node -v)"
14  exit 1
15fi
16 
17# Set Vite version based on Node version
18if [ "$NODE_VERSION" -ge 20 ]; then
19  VITE_VERSION="latest"
20  echo "✅ Using Vite latest (Node 20+)"
21else
22  VITE_VERSION="5.4.11"
23  echo "✅ Using Vite $VITE_VERSION (Node 18 compatible)"
24fi
25 
26# Detect OS and set sed syntax
27if [[ "$OSTYPE" == "darwin"* ]]; then
28  SED_INPLACE="sed -i ''"
29else
30  SED_INPLACE="sed -i"
31fi
32 
33# Check if pnpm is installed
34if ! command -v pnpm &> /dev/null; then
35  echo "📦 pnpm not found. Installing pnpm..."
36  npm install -g pnpm
37fi
38 
39# Check if project name is provided
40if [ -z "$1" ]; then
41  echo "❌ Usage: ./create-react-shadcn-complete.sh <project-name>"
42  exit 1
43fi
44 
45PROJECT_NAME="$1"
46SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
47COMPONENTS_TARBALL="$SCRIPT_DIR/shadcn-components.tar.gz"
48 
49# Check if components tarball exists
50if [ ! -f "$COMPONENTS_TARBALL" ]; then
51  echo "❌ Error: shadcn-components.tar.gz not found in script directory"
52  echo "   Expected location: $COMPONENTS_TARBALL"
53  exit 1
54fi
55 
56echo "🚀 Creating new React + Vite project: $PROJECT_NAME"
57 
58# Create new Vite project (always use latest create-vite, pin vite version later)
59pnpm create vite "$PROJECT_NAME" --template react-ts
60 
61# Navigate into project directory
62cd "$PROJECT_NAME"
63 
64echo "🧹 Cleaning up Vite template..."
65$SED_INPLACE '/<link rel="icon".*vite\.svg/d' index.html
66$SED_INPLACE 's/<title>.*<\/title>/<title>'"$PROJECT_NAME"'<\/title>/' index.html
67 
68echo "📦 Installing base dependencies..."
69pnpm install
70 
71# Pin Vite version for Node 18
72if [ "$NODE_VERSION" -lt 20 ]; then
73  echo "📌 Pinning Vite to $VITE_VERSION for Node 18 compatibility..."
74  pnpm add -D vite@$VITE_VERSION
75fi
76 
77echo "📦 Installing Tailwind CSS and dependencies..."
78pnpm install -D [email protected] postcss autoprefixer @types/node tailwindcss-animate
79pnpm install class-variance-authority clsx tailwind-merge lucide-react next-themes
80 
81echo "⚙️  Creating Tailwind and PostCSS configuration..."
82cat > postcss.config.js << 'EOF'
83export default {
84  plugins: {
85    tailwindcss: {},
86    autoprefixer: {},
87  },
88}
89EOF
90 
91echo "📝 Configuring Tailwind with shadcn theme..."
92cat > tailwind.config.js << 'EOF'
93/** @type {import('tailwindcss').Config} */
94module.exports = {
95  darkMode: ["class"],
96  content: [
97    "./index.html",
98    "./src/**/*.{js,ts,jsx,tsx}",
99  ],
100  theme: {
101    extend: {
102      colors: {
103        border: "hsl(var(--border))",
104        input: "hsl(var(--input))",
105        ring: "hsl(var(--ring))",
106        background: "hsl(var(--background))",
107        foreground: "hsl(var(--foreground))",
108        primary: {
109          DEFAULT: "hsl(var(--primary))",
110          foreground: "hsl(var(--primary-foreground))",
111        },
112        secondary: {
113          DEFAULT: "hsl(var(--secondary))",
114          foreground: "hsl(var(--secondary-foreground))",
115        },
116        destructive: {
117          DEFAULT: "hsl(var(--destructive))",
118          foreground: "hsl(var(--destructive-foreground))",
119        },
120        muted: {
121          DEFAULT: "hsl(var(--muted))",
122          foreground: "hsl(var(--muted-foreground))",
123        },
124        accent: {
125          DEFAULT: "hsl(var(--accent))",
126          foreground: "hsl(var(--accent-foreground))",
127        },
128        popover: {
129          DEFAULT: "hsl(var(--popover))",
130          foreground: "hsl(var(--popover-foreground))",
131        },
132        card: {
133          DEFAULT: "hsl(var(--card))",
134          foreground: "hsl(var(--card-foreground))",
135        },
136      },
137      borderRadius: {
138        lg: "var(--radius)",
139        md: "calc(var(--radius) - 2px)",
140        sm: "calc(var(--radius) - 4px)",
141      },
142      keyframes: {
143        "accordion-down": {
144          from: { height: "0" },
145          to: { height: "var(--radix-accordion-content-height)" },
146        },
147        "accordion-up": {
148          from: { height: "var(--radix-accordion-content-height)" },
149          to: { height: "0" },
150        },
151      },
152      animation: {
153        "accordion-down": "accordion-down 0.2s ease-out",
154        "accordion-up": "accordion-up 0.2s ease-out",
155      },
156    },
157  },
158  plugins: [require("tailwindcss-animate")],
159}
160EOF
161 
162# Add Tailwind directives and CSS variables to index.css
163echo "🎨 Adding Tailwind directives and CSS variables..."
164cat > src/index.css << 'EOF'
165@tailwind base;
166@tailwind components;
167@tailwind utilities;
168 
169@layer base {
170  :root {
171    --background: 0 0% 100%;
172    --foreground: 0 0% 3.9%;
173    --card: 0 0% 100%;
174    --card-foreground: 0 0% 3.9%;
175    --popover: 0 0% 100%;
176    --popover-foreground: 0 0% 3.9%;
177    --primary: 0 0% 9%;
178    --primary-foreground: 0 0% 98%;
179    --secondary: 0 0% 96.1%;
180    --secondary-foreground: 0 0% 9%;
181    --muted: 0 0% 96.1%;
182    --muted-foreground: 0 0% 45.1%;
183    --accent: 0 0% 96.1%;
184    --accent-foreground: 0 0% 9%;
185    --destructive: 0 84.2% 60.2%;
186    --destructive-foreground: 0 0% 98%;
187    --border: 0 0% 89.8%;
188    --input: 0 0% 89.8%;
189    --ring: 0 0% 3.9%;
190    --radius: 0.5rem;
191  }
192 
193  .dark {
194    --background: 0 0% 3.9%;
195    --foreground: 0 0% 98%;
196    --card: 0 0% 3.9%;
197    --card-foreground: 0 0% 98%;
198    --popover: 0 0% 3.9%;
199    --popover-foreground: 0 0% 98%;
200    --primary: 0 0% 98%;
201    --primary-foreground: 0 0% 9%;
202    --secondary: 0 0% 14.9%;
203    --secondary-foreground: 0 0% 98%;
204    --muted: 0 0% 14.9%;
205    --muted-foreground: 0 0% 63.9%;
206    --accent: 0 0% 14.9%;
207    --accent-foreground: 0 0% 98%;
208    --destructive: 0 62.8% 30.6%;
209    --destructive-foreground: 0 0% 98%;
210    --border: 0 0% 14.9%;
211    --input: 0 0% 14.9%;
212    --ring: 0 0% 83.1%;
213  }
214}
215 
216@layer base {
217  * {
218    @apply border-border;
219  }
220  body {
221    @apply bg-background text-foreground;
222  }
223}
224EOF
225 
226# Add path aliases to tsconfig.json
227echo "🔧 Adding path aliases to tsconfig.json..."
228node -e "
229const fs = require('fs');
230const config = JSON.parse(fs.readFileSync('tsconfig.json', 'utf8'));
231config.compilerOptions = config.compilerOptions || {};
232config.compilerOptions.baseUrl = '.';
233config.compilerOptions.paths = { '@/*': ['./src/*'] };
234fs.writeFileSync('tsconfig.json', JSON.stringify(config, null, 2));
235"
236 
237# Add path aliases to tsconfig.app.json
238echo "🔧 Adding path aliases to tsconfig.app.json..."
239node -e "
240const fs = require('fs');
241const path = 'tsconfig.app.json';
242const content = fs.readFileSync(path, 'utf8');
243// Remove comments manually
244const lines = content.split('\n').filter(line => !line.trim().startsWith('//'));
245const jsonContent = lines.join('\n');
246const config = JSON.parse(jsonContent.replace(/\/\*[\s\S]*?\*\//g, '').replace(/,(\s*[}\]])/g, '\$1'));
247config.compilerOptions = config.compilerOptions || {};
248config.compilerOptions.baseUrl = '.';
249config.compilerOptions.paths = { '@/*': ['./src/*'] };
250fs.writeFileSync(path, JSON.stringify(config, null, 2));
251"
252 
253# Update vite.config.ts
254echo "⚙️  Updating Vite configuration..."
255cat > vite.config.ts << 'EOF'
256import path from "path";
257import react from "@vitejs/plugin-react";
258import { defineConfig } from "vite";
259 
260export default defineConfig({
261  plugins: [react()],
262  resolve: {
263    alias: {
264      "@": path.resolve(__dirname, "./src"),
265    },
266  },
267});
268EOF
269 
270# Install all shadcn/ui dependencies
271echo "📦 Installing shadcn/ui dependencies..."
272pnpm install @radix-ui/react-accordion @radix-ui/react-aspect-ratio @radix-ui/react-avatar @radix-ui/react-checkbox @radix-ui/react-collapsible @radix-ui/react-context-menu @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-hover-card @radix-ui/react-label @radix-ui/react-menubar @radix-ui/react-navigation-menu @radix-ui/react-popover @radix-ui/react-progress @radix-ui/react-radio-group @radix-ui/react-scroll-area @radix-ui/react-select @radix-ui/react-separator @radix-ui/react-slider @radix-ui/react-slot @radix-ui/react-switch @radix-ui/react-tabs @radix-ui/react-toast @radix-ui/react-toggle @radix-ui/react-toggle-group @radix-ui/react-tooltip
273pnpm install sonner cmdk vaul embla-carousel-react react-day-picker react-resizable-panels date-fns react-hook-form @hookform/resolvers zod
274 
275# Extract shadcn components from tarball
276echo "📦 Extracting shadcn/ui components..."
277tar -xzf "$COMPONENTS_TARBALL" -C src/
278 
279# Create components.json for reference
280echo "📝 Creating components.json config..."
281cat > components.json << 'EOF'
282{
283  "$schema": "https://ui.shadcn.com/schema.json",
284  "style": "default",
285  "rsc": false,
286  "tsx": true,
287  "tailwind": {
288    "config": "tailwind.config.js",
289    "css": "src/index.css",
290    "baseColor": "slate",
291    "cssVariables": true,
292    "prefix": ""
293  },
294  "aliases": {
295    "components": "@/components",
296    "utils": "@/lib/utils",
297    "ui": "@/components/ui",
298    "lib": "@/lib",
299    "hooks": "@/hooks"
300  }
301}
302EOF
303 
304echo "✅ Setup complete! You can now use Tailwind CSS and shadcn/ui in your project."
305echo ""
306echo "📦 Included components (40+ total):"
307echo "  - accordion, alert, aspect-ratio, avatar, badge, breadcrumb"
308echo "  - button, calendar, card, carousel, checkbox, collapsible"
309echo "  - command, context-menu, dialog, drawer, dropdown-menu"
310echo "  - form, hover-card, input, label, menubar, navigation-menu"
311echo "  - popover, progress, radio-group, resizable, scroll-area"
312echo "  - select, separator, sheet, skeleton, slider, sonner"
313echo "  - switch, table, tabs, textarea, toast, toggle, toggle-group, tooltip"
314echo ""
315echo "To start developing:"
316echo "  cd $PROJECT_NAME"
317echo "  pnpm dev"
318echo ""
319echo "📚 Import components like:"
320echo "  import { Button } from '@/components/ui/button'"
321echo "  import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'"
322echo "  import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'"
323