react + vite

[ahmedRSA]

how can i use this with reactjs ??

[stimw]

just follow the installation docs

update: haha Maybe the main problem is the setting of tailwind css, and the tailwind has official docs for vite as mentioned below

[F-PTS]

Yes, although shadcn UI was created with next.js in mind, there's absolutely no issues when using it with react and vite.

follow setup guides from vite: https://vitejs.dev/guide/

and then follow the Manual Installation from the shadcn/ui kit: https://ui.shadcn.com/docs/installation

if you have any questions go ahead, if not please close the issue :)

[puneet-sarhali]

Also don't forget to follow Tailwind CSS guide after initial vite setup: https://tailwindcss.com/docs/guides/vite

Path aliasing did not work for me as described in the manual docs, and had to manually change the file imports to "../.." syntax.

Also modify tailwind.config.js for react instead of next.js

export default {
  content: [
-     "app/**/*.{ts,tsx}", 
-     "components/**/*.{ts,tsx}"
+    "./index.html",
+.   "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {},
  plugins: [],
}

[ahmedRSA]

Also don't forget to follow Tailwind CSS guide after initial vite setup: https://tailwindcss.com/docs/guides/vite

Path aliasing did not work for me as described in the manual docs, and had to manually change the file imports to "../.." syntax.

Also modify tailwind.config.js for react instead of next.js

export default {
  content: [
-     "app/**/*.{ts,tsx}", 
-     "components/**/*.{ts,tsx}"
+    "./index.html",
+.   "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {},
  plugins: [],
}

Thanks, i beat up my head for hours setting up path alias did u found any solution?

[tuminzee]

I think your issue was resolved @ahmedRSA if so can you please close the issue 👼🏼

[rawnly]

Path aliasing did not work for me as described in the manual docs, and had to manually change the file imports to "../.." syntax.

Hey @puneet-sarhali you might find this useful: https://github.com/aleclarson/vite-tsconfig-paths

[tcortega]

There is a repository created by shadcn for it, although it is not updated. https://github.com/shadcn/vite-template

It is somewhat broken, and I have a fork that actually works for you to use out of the box: https://github.com/tcortega/vite-template

Last time I checked it worked out.

[ahmedRSA]

There is a repository created by shadcn for it, although it is not updated. https://github.com/shadcn/vite-template

It is somewhat broken, and I have a fork that actually works for you to use out of the box: https://github.com/tcortega/vite-template

Last time I checked it worked out.

thanks for this.

[CyrusZei]

There is a repository created by shadcn for it, although it is not updated. https://github.com/shadcn/vite-template

It is somewhat broken, and I have a fork that actually works for you to use out of the box: https://github.com/tcortega/vite-template

Last time I checked it worked out.

ofc he did!! love it that he did thought of this, True developer

[Znoy108x]

Yes, although shadcn UI was created with next.js in mind, there's absolutely no issues when using it with react and vite.

follow setup guides from vite: https://vitejs.dev/guide/

and then follow the Manual Installation from the shadcn/ui kit: https://ui.shadcn.com/docs/installation

if you have any questions go ahead, if not please close the issue :)

if followed all the steps mentioned by docs but still @ folder is creating outside src, how can i create that inside src??

[jagadeesh-k-ti]

Yes, although shadcn UI was created with next.js in mind, there's absolutely no issues when using it with react and vite. follow setup guides from vite: https://vitejs.dev/guide/ and then follow the Manual Installation from the shadcn/ui kit: https://ui.shadcn.com/docs/installation if you have any questions go ahead, if not please close the issue :)

if followed all the steps mentioned by docs but still @ folder is creating outside src, how can i create that inside src??

same thing

to fix (idk if we are even supposed to fix this "bug"), you can replace ./src with ./@/* in both your vite.config.js and tsconfig.json

[Lxdovic]

if followed all the steps mentioned by docs but still @ folder is creating outside src, how can i create that inside src??

Dont know if that would help since you posted this a few months ago but your tsconfig.json is wrong but that's an easy mistake to make, baseUrl and path are supposed to be in compilerOptions here's my tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    
    /* here */
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }],
}

[lalitx17]

It took me a while to figure out how to use Shadcn with react and vite, even with the documentation. Here is what worked for me.

components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/index.css",
    "baseColor": "slate",
    "cssVariables": false,
    "prefix": ""
  },
  "aliases": {
    "components": "src/components",
    "utils": "src/lib/utils"
  }
}

vite.config.ts

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

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

adding the bit to tsconfig.json

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

Folder Structure

React function imports

[bluedusk]

The document is very misleading, it has to be

   "components": "src/components",
    "utils": "src/lib/utils"