1#!/usr/bin/env bash
2# shadcn/ui Setup Verification Script
3# Validates that a project is correctly configured for shadcn/ui
4 
5set -e
6 
7GREEN='\033[0;32m'
8RED='\033[0;31m'
9YELLOW='\033[1;33m'
10NC='\033[0m' # No Color
11 
12echo "🔍 Verifying shadcn/ui setup..."
13echo ""
14 
15# Check if components.json exists
16if [ -f "components.json" ]; then
17    echo -e "${GREEN}✓${NC} components.json found"
18else
19    echo -e "${RED}✗${NC} components.json not found"
20    echo -e "  ${YELLOW}Run:${NC} npx shadcn@latest init"
21    exit 1
22fi
23 
24# Check if tailwind.config exists
25if [ -f "tailwind.config.js" ] || [ -f "tailwind.config.ts" ]; then
26    echo -e "${GREEN}✓${NC} Tailwind config found"
27else
28    echo -e "${RED}✗${NC} tailwind.config.js not found"
29    echo -e "  ${YELLOW}Install Tailwind:${NC} npm install -D tailwindcss postcss autoprefixer"
30    exit 1
31fi
32 
33# Check if tsconfig.json has path aliases
34if [ -f "tsconfig.json" ]; then
35    if grep -q '"@/\*"' tsconfig.json; then
36        echo -e "${GREEN}✓${NC} Path aliases configured in tsconfig.json"
37    else
38        echo -e "${YELLOW}⚠${NC} Path aliases not found in tsconfig.json"
39        echo "  Add to compilerOptions.paths:"
40        echo '  "@/*": ["./src/*"]'
41    fi
42else
43    echo -e "${YELLOW}⚠${NC} tsconfig.json not found (TypeScript not configured)"
44fi
45 
46# Check if globals.css or equivalent exists
47if [ -f "src/index.css" ] || [ -f "src/globals.css" ] || [ -f "app/globals.css" ]; then
48    echo -e "${GREEN}✓${NC} Global CSS file found"
49    
50    # Check for Tailwind directives
51    CSS_FILE=$(find . -name "globals.css" -o -name "index.css" | head -n 1)
52    if grep -q "@tailwind base" "$CSS_FILE"; then
53        echo -e "${GREEN}✓${NC} Tailwind directives present"
54    else
55        echo -e "${RED}✗${NC} Tailwind directives missing"
56        echo "  Add to your CSS file:"
57        echo "  @tailwind base;"
58        echo "  @tailwind components;"
59        echo "  @tailwind utilities;"
60    fi
61    
62    # Check for CSS variables
63    if grep -q "^:root" "$CSS_FILE" || grep -q "@layer base" "$CSS_FILE"; then
64        echo -e "${GREEN}✓${NC} CSS variables defined"
65    else
66        echo -e "${YELLOW}⚠${NC} CSS variables not found"
67        echo "  shadcn/ui requires CSS variables for theming"
68    fi
69else
70    echo -e "${RED}✗${NC} Global CSS file not found"
71fi
72 
73# Check if components/ui directory exists
74if [ -d "src/components/ui" ] || [ -d "components/ui" ]; then
75    echo -e "${GREEN}✓${NC} components/ui directory exists"
76    
77    # Count components
78    COMPONENT_COUNT=$(find . -path "*/components/ui/*.tsx" -o -path "*/components/ui/*.jsx" | wc -l)
79    echo -e "  ${COMPONENT_COUNT} components installed"
80else
81    echo -e "${YELLOW}⚠${NC} components/ui directory not found"
82    echo "  Add your first component: npx shadcn@latest add button"
83fi
84 
85# Check if lib/utils exists
86if [ -f "src/lib/utils.ts" ] || [ -f "lib/utils.ts" ]; then
87    echo -e "${GREEN}✓${NC} lib/utils.ts exists"
88    
89    # Check for cn function
90    UTILS_FILE=$(find . -name "utils.ts" | grep "lib" | head -n 1)
91    if grep -q "export function cn" "$UTILS_FILE"; then
92        echo -e "${GREEN}✓${NC} cn() utility function present"
93    else
94        echo -e "${RED}✗${NC} cn() utility function missing"
95    fi
96else
97    echo -e "${RED}✗${NC} lib/utils.ts not found"
98fi
99 
100# Check package.json dependencies
101if [ -f "package.json" ]; then
102    echo ""
103    echo "📦 Checking dependencies..."
104    
105    # Required dependencies
106    REQUIRED_DEPS=("react" "tailwindcss")
107    RECOMMENDED_DEPS=("class-variance-authority" "clsx" "tailwind-merge" "tailwindcss-animate")
108    
109    for dep in "${REQUIRED_DEPS[@]}"; do
110        if grep -q "\"$dep\"" package.json; then
111            echo -e "${GREEN}✓${NC} $dep installed"
112        else
113            echo -e "${RED}✗${NC} $dep not installed"
114        fi
115    done
116    
117    echo ""
118    echo "Recommended dependencies:"
119    for dep in "${RECOMMENDED_DEPS[@]}"; do
120        if grep -q "\"$dep\"" package.json; then
121            echo -e "${GREEN}✓${NC} $dep installed"
122        else
123            echo -e "${YELLOW}⚠${NC} $dep not installed (recommended)"
124        fi
125    done
126fi
127 
128echo ""
129echo -e "${GREEN}✓${NC} Setup verification complete!"
130echo ""
131echo "Next steps:"
132echo "  1. Add components: npx shadcn@latest add [component]"
133echo "  2. View catalog: npx shadcn@latest add --help"
134echo "  3. Browse docs: https://ui.shadcn.com"
135