docs: create new docs for installing Shadcn UI with JavaScript and Vite

apps/www/config/docs.ts

@@ -123,10 +123,15 @@ export const docsConfig: DocsConfig = {
           items: [],
         },
         {
-          title: "Vite",
+          title: "Vite (TypeScript)",
           href: "/docs/installation/vite",
           items: [],
         },
+        {
+          title: "Vite (JavaScript)",
+          href: "/docs/installation/vite-javascript",
+          items: [],
+        },
         {
           title: "Laravel",
           href: "/docs/installation/laravel",

apps/www/content/docs/installation/vite-javascript.mdx

@@ -0,0 +1,135 @@
+---
+title: Vite (JavaScript)
+description: Install and configure shadcn/ui for Vite.
+---
+
+<Callout className="bg-blue-50 border-blue-600 dark:border-blue-900 dark:bg-blue-950 mb-6 [&_code]:bg-blue-100 dark:[&_code]:bg-blue-900">
+  **Note:** The following guide is for Tailwind v4. If you are using Tailwind
+  v3, use `[email protected]`.
+</Callout>
+
+<Steps>
+
+### Create project
+
+Start by creating a new React project using `vite`. Select the **React + JavaScript** template:
+
+```bash
+npm create vite@latest
+```
+
+You will be asked a few questions to configure your react app
+
+```txt
+Project name:
+```
+
+```txt
+Select a framework: React
+```
+
+```txt
+Select a variant: JavaScript
+```
+
+
+### Add Tailwind CSS
+
+```bash
+npm install tailwindcss @tailwindcss/vite
+```
+
+Replace everything in `src/index.css` with the following:
+
+```css title="src/index.css"
+@import "tailwindcss";
+```
+
+### Create a jsconfig.json file (inside the root directory)
+
+```ts {11-16} showLineNumbers
+{
+  "files": [],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
+```
+
+### Update vite.config.js
+
+Add the following code to the vite.config.ts so your app can resolve paths without error:
+
+```bash
+npm install -D @types/node
+```
+
+```javascript title="vite.config.js" showLineNumbers {1,2,8-13}
+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"),
+    },
+  },
+})
+```
+
+### Run the CLI
+
+Run the `shadcn` init command to setup your project:
+
+```bash
+npx shadcn@latest init
+```
+
+You will be asked a few questions to configure `components.json`.
+
+```txt
+Which color would you like to use as base color? › Neutral
+```
+
+You might see this message if you are using React 19
+
+```txt
+It looks like you are using React 19.
+Some packages may fail to install due to peer dependency issues in ...
+```
+
+See more info about the solution <Link href="../../docs/react-19#how-to-fix-this" target="_blank" rel="noreferrer">here</Link>
+
+
+### Add Components
+
+You can now start adding components to your project.
+
+```bash
+npx shadcn@latest add button
+```
+
+The command above will add the `Button` component to your project. You can then import it like this:
+
+```tsx showLineNumbers title="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
+```
+
+</Steps>

apps/www/content/docs/installation/vite.mdx

@@ -1,5 +1,5 @@
 ---
-title: Vite
+title: Vite (TypeScript)
 description: Install and configure shadcn/ui for Vite.
 ---