# Complete Guide to Installing shadcn/ui

## Prerequisites
- Node.js 16.8 or later
- React project using Next.js, Vite, Remix, Gatsby, or Create React App
- Git (for version control)

## Step 1: Initialize Project (if you haven't already)

```bash
# For Next.js
npx create-next-app@latest my-app --typescript --tailwind --eslint

# For Vite
npm create vite@latest my-app -- --template react-ts
cd my-app
```

## Step 2: Install Dependencies for Vite Project

```bash
# If using Vite, install Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# Configure tailwind.config.js for Vite

module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
```

## Step 3: Install shadcn/ui CLI

```bash
# Using npm
npm install shadcn-ui@latest

# Using yarn
yarn add shadcn-ui@latest

# Using pnpm
pnpm add shadcn-ui@latest
```

## Step 4: Initialize shadcn/ui

```bash
# Run the init command
npx shadcn-ui@latest init
```

During initialization, you'll be asked several questions:

1. Would you like to use TypeScript (recommended)? → Yes
2. Which style would you like to use? → Default
3. Which color would you like to use as base color? → Slate
4. Where is your global CSS file? → app/globals.css or src/index.css
5. Would you like to use CSS variables for colors? → Yes
6. Where is your tailwind.config.js located? → tailwind.config.js
7. Configure the import alias for components? → @/components
8. Configure the import alias for utils? → @/lib/utils
9. Are you using React Server Components? → No (unless using Next.js App Router)

## Step 5: Add Required Dependencies

```bash
# Install required dependencies
npm install @radix-ui/react-icons @hookform/resolvers class-variance-authority clsx
lucide-react tailwind-merge tailwindcss-animate zod @radix-ui/react-slot @radix-
ui/react-toast
```

## Step 6: Update Tailwind Configuration

```javascript
// tailwind.config.js
const { fontFamily } = require("tailwindcss/defaultTheme")

/** @type {import('tailwindcss').Config} */

module.exports = {
darkMode: ["class"],
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
 DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: `var(--radius)`,
md: `calc(var(--radius) - 2px)`,
sm: "calc(var(--radius) - 4px)",
},
fontFamily: {
sans: ["var(--font-sans)", ...fontFamily.sans],
},
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [require("tailwindcss-animate")],
}
```

## Step 7: Update Global CSS

```css
@tailwind base;
@tailwind components;
@tailwind components;

@layer base {
:root {
--background: 0 0% 100%;
--foreground: 224 71.4% 4.1%;
--card: 0 0% 100%;
--card-foreground: 224 71.4% 4.1%;
--popover: 0 0% 100%;
--popover-foreground: 224 71.4% 4.1%;
--primary: 220.9 39.3% 11%;
--primary-foreground: 210 20% 98%;
--secondary: 220 14.3% 95.9%;
--secondary-foreground: 220.9 39.3% 11%;
--muted: 220 14.3% 95.9%;
--muted-foreground: 220 8.9% 46.1%;
--accent: 220 14.3% 95.9%;
--accent-foreground: 220.9 39.3% 11%;
--destructive: 0 84.2% 60.2%;
 --destructive-foreground: 210 20% 98%;
--border: 220 13% 91%;
--input: 220 13% 91%;
--ring: 224 71.4% 4.1%;
--radius: 0.5rem;
}

.dark {
--background: 224 71.4% 4.1%;
--foreground: 210 20% 98%;
--card: 224 71.4% 4.1%;
--card-foreground: 210 20% 98%;
--popover: 224 71.4% 4.1%;
--popover-foreground: 210 20% 98%;
--primary: 210 20% 98%;
--primary-foreground: 220.9 39.3% 11%;
--secondary: 215 27.9% 16.9%;
--secondary-foreground: 210 20% 98%;
--muted: 215 27.9% 16.9%;
--muted-foreground: 217.9 10.6% 64.9%;
--accent: 215 27.9% 16.9%;
--accent-foreground: 210 20% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 20% 98%;
--border: 215 27.9% 16.9%;
--input: 215 27.9% 16.9%;
--ring: 216 12.2% 83.9%;
}
}

@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
```

## Step 8: Install Individual Components

```bash
# Install button component
npx shadcn-ui@latest add button

# Install other components as needed

npx shadcn-ui@latest add card
npx shadcn-ui@latest add input
npx shadcn-ui@latest add popover
# etc.
```

## Step 9: Usage Example

```tsx
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"

export default function App() {

return (
 <Card>
<h1>Hello shadcn/ui</h1>
<Button>Click me</Button>
</Card>
)
}
```

## Common Issues and Solutions

### Issue 1: Path Aliases Not Working

If you're using Vite and path aliases (@/) aren't working, update your
`vite.config.ts`:
```typescript
import path from "path"
import { defineConfig } from 'vite'

export default defineConfig({

resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
})
```

### Issue 2: TypeScript Path Aliases

Update your `tsconfig.json`:
```json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
```

### Issue 3: Missing Dependencies

If you encounter missing dependency errors, install them manually:
```bash
npm install @radix-ui/react-[component-name]
```

## Recommended Components for a Real Estate Website

For your real estate website, consider installing these components:
```bash
npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add input
npx shadcn-ui@latest add select
npx shadcn-ui@latest add popover
npx shadcn-ui@latest add dialog
npx shadcn-ui@latest add form
npx shadcn-ui@latest add slider
npx shadcn-ui@latest add tabs
npx shadcn-ui@latest add toast
```