Lesson 1. React+Vite+TS+Shadcn Project

Vite React app with Tailwind CSS and shadcn

Install and configure shadcn/ui for Vite React App.

Note

Note: The following guide is for Tailwind v4. If you are using Tailwind v3, use [email protected].

Step 1. Create a Vite React App project

Start by creating a new React project using vite. Select the React + TypeScript template:

npm create vite@latest
│
◇  Project name:
│  bible-flashcard-app
│
◇  Select a framework:
│  React
│
◇  Select a variant:
│  TypeScript

Step 2. cd to bible-flashcard-app

Add Tailwind CSS

npm install tailwindcss @tailwindcss/vite

Replace everything in src/index.css with the following:

// src/index.css
@import "tailwindcss";

Step 3. Open VSC and Edit tsconfig.json file

The current version of Vite splits TypeScript configuration into three files, two of which need to be edited. Add the baseUrl and paths properties to the compilerOptions section of the tsconfig.json and tsconfig.app.json files:

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

Step 4. Edit tsconfig.app.json file

Add the following code to the tsconfig.app.json file to resolve paths, for your IDE:

// tsconfig.app.json snippet 
{
  "compilerOptions": {
    // ...add lines
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...end lines
  }
}

Step 5. Update vite.config.ts

Add the following code to the vite.config.ts so your app can resolve paths without error:

npm install -D @types/node

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

Step 6. Run the CLI

Run the shadcn init command to setup your project:

npx shadcn@latest init

You will be asked a few questions to configure components.json.

Which color would you like to use as base color? › Neutral

Step 7. Add Shadcn Components

You can now start adding components to your project.

npx shadcn@latest add button
npx shadcn@latest add progress
npx shadcn@latest add card

The first command above will add the Button component to your project. You can then import it like this:

src/App.tsx

// src/App.tsx
import { Button } from "@/components/ui/button"

function App() {
  return (
    <div className="flex flex-col items-center justify-center min-h-svh">
      <Button>Click me</Button>
    </div>
  )
}

export default App

AppBibleFlashCard.jsx

Step 8. Additional Package Installation

Additional package installation for congrats confetti and motion animation

//canvas-confetti animation package
npm install canvas-confetti
npm install framer-motion

Import modules

import confetti from 'canvas-confetti'
import { motion } from 'framer-motion'

Step 9.