docs(www): add react with vite installation guide (#714)

* docs: add react with vite installation guide

* refactor(docs): move Ract with vite page into installation.mdx as tab

* fix(docs): remove classnames and wrapper divs

* fix(docs): update tsconfig file path to default @

* docs(www): fix code style

---------

Co-authored-by: Samuel Adebayo <samuel.adebayo@engagetech.com>
Co-authored-by: shadcn <m@shadcn.com>

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

@@ -7,6 +7,7 @@ description: How to install dependencies and structure your app.
   <TabsList>
     <TabsTrigger value="nextjs">Next.js</TabsTrigger>
     <TabsTrigger value="remix">Remix</TabsTrigger>
+    <TabsTrigger value="vite">Vite</TabsTrigger>
   </TabsList>
   <TabsContent value="nextjs">
     <FrameworkDocs data="nextjs" />
@@ -14,6 +15,9 @@ description: How to install dependencies and structure your app.
   <TabsContent value="remix">
     <FrameworkDocs data="remix" />
   </TabsContent>
+  <TabsContent value="vite">
+    <FrameworkDocs data="vite" />
+  </TabsContent>
 </Tabs>
 
 That's it. You can now start adding components to your project.

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

@@ -0,0 +1,84 @@
+---
+title: Vite
+description: Learn how to install and use with Vite.
+---
+
+<Steps>
+
+### Create project
+
+Start by creating a new React project using `vite`:
+
+```bash
+npm create vite@latest
+```
+
+### Add Tailwind and its configuration
+
+Install `tailwindcss` and its peer dependencies, then generate your `tailwind.config.js` and `postcss.config.js` files:
+
+```bash
+npm install -D tailwindcss postcss autoprefixer
+
+npx tailwindcss init -p
+```
+
+### Edit tsconfig.json
+
+Add the code below to the compilerOptions of your tsconfig.json so your app can resolve paths without error
+
+```typescript
+"baseUrl": ".",
+"paths": {
+  "@/*": ["./src/*"]
+}
+```
+
+### Update vite.config.ts
+
+Add the code below to the vite.config.ts so your app can resolve paths without error
+
+```bash
+# (so you can import "path" without error)
+npm i -D @types/node
+```
+
+```typescript
+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"),
+    },
+  },
+})
+```
+
+### Run the CLI
+
+Run the `shadcn-ui` init command to setup your project:
+
+```bash
+npx shadcn-ui@latest init
+```
+
+### Configure components.json
+
+You will be asked a few questions to configure `components.json`:
+
+```txt showLineNumbers
+Which style would you like to use? › Default
+Which color would you like to use as base color? › Slate
+Where is your global CSS file? › › src/index.css
+Do you want to use CSS variables for colors? › no / yes
+Where is your tailwind.config.js located? › tailwind.config.js
+Configure the import alias for components: › @/components
+Configure the import alias for utils: › @/lib/utils
+Are you using React Server Components? › no / yes (no)
+```
+
+</Steps>