Initialise shadcn

readme.md

Setting up shadcn in a React project with Vite, Tailwind CSS, and TypeScript

Steps:

1. Create a new Vite project with React:

   npm create vite@latest . -- --template react

2. Install Tailwind CSS and its dependencies:

   npm i -D tailwindcss@3 autoprefixer postcss
   npx tailwindcss init -p

3. Set up index.css with Tailwind directives:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

4. Configure tailwind.config.js:

   /** @type {import('tailwindcss').Config} */
   export default {
     content: ['./index.html', './src/**/*.{js,jsx}'],
     theme: {
       extend: {},
     },
     plugins: [],
   };

5. Set up jsconfig.json for path aliasing:

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

6. Initialize shadcn:

   npx shadcn@latest init

7. Install @types/node for TypeScript support:

   npm install --save-dev @types/node

8. Configure vite.config.js for path aliasing:

   import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react';
   import path from 'path';
   
   export default defineConfig({
     plugins: [react()],
     resolve: {
       alias: {
         '@': path.resolve(__dirname, './src'),
       },
     },
   });

Summary:

• Vite + React project setup.
• Tailwind CSS configuration.
• Path aliasing with jsconfig.json and vite.config.js.
• shadcn initialization for UI components.
• TypeScript support with @types/node.

You’re now ready to use shadcn components in your project!