Steps to Integrate shadcn component library to your Vite/React.js project

Step 1:

open the frontend folder in your IDE and go to the terminal then u need to initialize the shadcn@latest there so basically when you add the components from the shadcn you download the component source code directly into the path u configured in the future you ll walk pass through this now just think of it this way in the future lets say if u want a button that is already designed by shadcn then u give a command called add button which downloads the button from shadcn and installs it in the path configured by u in the component.json

this is the first command that u need to write

Note: make sure that u have tailwindcss configured in the frontend application and then path alias configured in the frontend application

So ok i’ll walk u through the prerequisities before using shadcn component

1. you have to download and integrate tailwindcss in the application.
2. you have to configure the path alias like right now u import files like this right i.e

import {button} from "src/components/button"
or 
import {button} from "../components/button"

so with the path alias configured u’ll be point the src/components directly to the path called @components here @components = src/components

Get Anush Lobo’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

so now u can import like this

import {button} from "@components/button"

"paths": {
      "@/*": ["./src/*"],
      "@app/*": ["./src/app/*"],
      "@features/*": ["./src/features/*"],
      "@components/*": ["./src/components/*"],
      "@lib/*": ["./src/lib/*"],
      "@store/*": ["./src/store/*"],
}

u need to config this in both the tsconfig.json and vite.config.ts

In the vite.config.ts u are writting the code like this

import path from 'path'
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

in here as u can see there is something called as — dirname keyword now the vite code is written inside the node.js environment so node.js wont understand what this — dirname is without defining this so u need a library called @types/node so download that first for path alias setup

npm install -D @types/node

now after this setup u can download or initialize the shadcn from the code

npx shadcn@latest init

now after this code and all the points mentioned above the folder and configuration is all set up for the use of shadcn components now the next work is directly to install it and then use it in the application import it from the components/ui and use it with the options that it provides u

//if u want button then the code is 
npx shadcn@latest add button

now the button code will be added to the folder and then u can use it .

this is the configuration and setup for using the shadcn component in your frontend application .