Configure Shadcn/UI

After installing reactjs using viteJs.

Create project

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

pnpmnpmyarnbun

npm create vite@latest

Add Tailwind CSS

pnpmnpmyarnbun

npm install tailwindcss @tailwindcss/vite

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

src/index.css

@import "tailwindcss";

Create a new file jsconfig.json, insert code in bellow:

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

After settings up these configurations, you can run shadcn-ui initialization command again.

After successful, you can install command like this

npx shadcn@latest add form input button

Last updated