Integrating Tailwind, Shadcn UI with React

Important Links

We will be using:

Components shadcn/tailwind

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

Create with one Command:


irm "https://raw.githubusercontent.com/shariarratul/react-tailwind-shadcn-OneStepSetup/refs/heads/main/installTailwindShadcnReact.ps1" | iex

Create Vite React Project

npm create vite@latest my-project
cd my-project
npm install

Install Tailwind CSS

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

Replace everything in src/index.css

@import "tailwindcss";

Replace everything in tsconfig.json

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Add to tsconfig.app.json

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}

Update vite.config.ts

First, install Node types:

npm install -D @types/node

Replace in vite.config.ts:

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"),
    },
  },
})

Setup Shadcn in Your Project

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).

Add Shadcn Components

npx shadcn@latest add button card input

Run React App

npm run dev

Use Dark/Other Modes in Shadcn

To enable dark mode by default:

<!DOCTYPE html>
<html lang="en" class="dark">
  <head>
  </head>
  <body>
    ...
  </body>
</html>

Add More Custom Themes Using index.css

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);
}

Integrating Shadcn UI with React 19