docs(www): update installation docs (#4725)

apps/www/config/docs.ts

@@ -89,6 +89,46 @@ export const docsConfig: DocsConfig = {
         },
       ],
     },
+    {
+      title: "Installation",
+      items: [
+        {
+          title: "Next.js",
+          href: "/docs/installation/next",
+          items: [],
+        },
+        {
+          title: "Vite",
+          href: "/docs/installation/vite",
+          items: [],
+        },
+        {
+          title: "Remix",
+          href: "/docs/installation/remix",
+          items: [],
+        },
+        {
+          title: "Astro",
+          href: "/docs/installation/astro",
+          items: [],
+        },
+        {
+          title: "Laravel",
+          href: "/docs/installation/laravel",
+          items: [],
+        },
+        {
+          title: "Gatsby",
+          href: "/docs/installation/gatsby",
+          items: [],
+        },
+        {
+          title: "Manual",
+          href: "/docs/installation/manual",
+          items: [],
+        },
+      ],
+    },
     {
       title: "Components",
       items: [

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

@@ -45,19 +45,6 @@ description: How to install dependencies and structure your app.
     </svg>
     <p className="font-medium mt-2">Remix</p>
   </LinkedCard>
-  <LinkedCard href="/docs/installation/gatsby">
-    <svg
-      role="img"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      className="w-10 h-10"
-      fill="currentColor"
-    >
-      <title>Gatsby</title>
-      <path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 2.571c3.171 0 5.915 1.543 7.629 3.858l-1.286 1.115C16.886 5.572 14.571 4.286 12 4.286c-3.343 0-6.171 2.143-7.286 5.143l9.857 9.857c2.486-.857 4.373-3 4.973-5.572h-4.115V12h6c0 4.457-3.172 8.228-7.372 9.17L2.83 9.944C3.772 5.743 7.543 2.57 12 2.57zm-9.429 9.6l9.344 9.258c-2.4-.086-4.801-.943-6.601-2.743-1.8-1.8-2.743-4.201-2.743-6.515z" />
-    </svg>
-    <p className="font-medium mt-2">Gatsby</p>
-  </LinkedCard>
   <LinkedCard href="/docs/installation/astro">
     <svg
       role="img"
@@ -86,6 +73,19 @@ description: How to install dependencies and structure your app.
     </svg>
     <p className="font-medium mt-2">Laravel</p>
   </LinkedCard>
+  <LinkedCard href="/docs/installation/gatsby">
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="w-10 h-10"
+      fill="currentColor"
+    >
+      <title>Gatsby</title>
+      <path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 2.571c3.171 0 5.915 1.543 7.629 3.858l-1.286 1.115C16.886 5.572 14.571 4.286 12 4.286c-3.343 0-6.171 2.143-7.286 5.143l9.857 9.857c2.486-.857 4.373-3 4.973-5.572h-4.115V12h6c0 4.457-3.172 8.228-7.372 9.17L2.83 9.944C3.772 5.743 7.543 2.57 12 2.57zm-9.429 9.6l9.344 9.258c-2.4-.086-4.801-.943-6.601-2.743-1.8-1.8-2.743-4.201-2.743-6.515z" />
+    </svg>
+    <p className="font-medium mt-2">Gatsby</p>
+  </LinkedCard>
   <LinkedCard href="/docs/installation/manual">
     <svg
       role="img"

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

@@ -13,6 +13,16 @@ Run the `init` command to create a new Next.js project or to setup an existing o
 npx shadcn@latest init
 ```
 
+<Callout className="mt-4">
+
+You can use the `-d` flag for defaults i.e `new-york`, `zinc` and `yes` for the css variables.
+
+```bash
+npx shadcn@latest init -d
+```
+
+</Callout>
+
 ### Configure components.json
 
 You will be asked a few questions to configure `components.json`:
@@ -23,40 +33,6 @@ Which color would you like to use as base color? › Zinc
 Do you want to use CSS variables for colors? › no / yes
 ```
 
-### App structure
-
-Here's how I structure my Next.js apps. You can use this as a reference:
-
-```txt {6-10,14-15}
-.
-├── app
-│   ├── layout.tsx
-│   └── page.tsx
-├── components
-│   ├── ui
-│   │   ├── alert-dialog.tsx
-│   │   ├── button.tsx
-│   │   ├── dropdown-menu.tsx
-│   │   └── ...
-│   ├── main-nav.tsx
-│   ├── page-header.tsx
-│   └── ...
-├── lib
-│   └── utils.ts
-├── styles
-│   └── globals.css
-├── next.config.js
-├── package.json
-├── postcss.config.js
-├── tailwind.config.ts
-└── tsconfig.json
-```
-
-- I place the UI components in the `components/ui` folder.
-- The rest of the components such as `<PageHeader />` and `<MainNav />` are placed in the `components` folder.
-- The `lib` folder contains all the utility functions. I have a `utils.ts` where I define the `cn` helper.
-- The `styles` folder contains the global CSS.
-
 ### That's it
 
 You can now start adding components to your project.