docs(www): add remix and tabbed installation docs (#753)

* 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 @

* feat: added remix installation docs

* feat: added tabbed installation docs

* fix: remove log statement

* fix: cleaned up, restored usage notice, removed vite for now

* fix: moved installation.mdx into folder

---------

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

apps/www/components/framework-docs.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+import { allDocs } from "contentlayer/generated"
+
+import { Mdx } from "./mdx-components"
+
+interface FrameworkDocsProps extends React.HTMLAttributes<HTMLDivElement> {
+  data: string
+}
+
+export function FrameworkDocs({ ...props }: FrameworkDocsProps) {
+  const frameworkDoc = allDocs.find(
+    (doc) => doc.slug === `/docs/installation/${props.data}`
+  )
+
+  if (!frameworkDoc) {
+    return null
+  }
+
+  return <Mdx code={frameworkDoc.body.code} />
+}

apps/www/components/mdx-components.tsx

@@ -14,6 +14,7 @@ import { ComponentExample } from "@/components/component-example"
 import { ComponentPreview } from "@/components/component-preview"
 import { ComponentSource } from "@/components/component-source"
 import { CopyButton, CopyNpmCommandButton } from "@/components/copy-button"
+import { FrameworkDocs } from "@/components/framework-docs"
 import { StyleWrapper } from "@/components/style-wrapper"
 import {
   Accordion,
@@ -284,6 +285,12 @@ const components = {
       {...props}
     />
   ),
+  FrameworkDocs: ({
+    className,
+    ...props
+  }: React.ComponentProps<typeof FrameworkDocs>) => (
+    <FrameworkDocs className={cn(className)} {...props} />
+  ),
 }
 
 interface MdxProps {

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

@@ -0,0 +1,27 @@
+---
+title: Installation
+description: How to install dependencies and structure your app.
+---
+
+<Tabs defaultValue="nextjs">
+  <TabsList>
+    <TabsTrigger value="nextjs">Next.js</TabsTrigger>
+    <TabsTrigger value="remix">Remix</TabsTrigger>
+  </TabsList>
+  <TabsContent value="nextjs">
+    <FrameworkDocs data="nextjs" />
+  </TabsContent>
+  <TabsContent value="remix">
+    <FrameworkDocs data="remix" />
+  </TabsContent>
+</Tabs>
+
+That's it. You can now start adding components to your project.
+
+```bash
+npx shadcn-ui@latest add
+```
+
+## Other frameworks
+
+I'm looking for help writing guides for other frameworks. Help me write those guides by [opening an PR](https://github.com/shadcn/ui).

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

@@ -1,10 +1,8 @@
 ---
-title: Installation
-description: How to install dependencies and structure your app.
+title: Next.js
+description: Learn how to install and use with Next.js.
 ---
 
-## Next.js
-
 <Steps>
 
 ### Create project
@@ -73,13 +71,3 @@ Here's how I structure my app. I use Next.js, but this is not required.
 - The `styles` folder contains the global CSS.
 
 </Steps>
-
-That's it. You can now start adding components to your project.
-
-```bash
-npx shadcn-ui@latest add
-```
-
-## Other frameworks
-
-I'm looking for help writing guides for other frameworks. Help me write guides for Remix, Astro and Vite by [opening an PR](https://github.com/shadcn/ui).

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

@@ -0,0 +1,90 @@
+---
+title: Remix
+description: Learn how to install and use with Remix.
+---
+
+<Steps>
+
+### Create project
+
+Start by creating a new Remix project using `create-remix`:
+
+```bash
+npx create-remix@latest my-app
+```
+
+### 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? › › app/tailwind.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
+```
+
+### App structure
+
+- Place the UI components in the `app/components/ui` folder.
+- Your own components can be placed in the `app/components` folder.
+- The `app/lib` folder contains all the utility functions. We have a `utils.ts` where I define the `cn` helper.
+- The `app/tailwind.css` file contains the global CSS.
+
+### Enable Tailwind and PostCSS
+
+We have to install tailwindcss and autoprefixer.
+
+```bash
+pnpm add -D tailwindcss@latest autoprefixer@latest
+```
+
+Then we create a `postcss.config.js` file:
+
+```js
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+```
+
+And finally we add the following to our `remix.config.js` file:
+
+```js {4-5}
+/** @type {import('@remix-run/dev').AppConfig} */
+module.exports = {
+  ...
+  tailwind: true,
+  postcss: true,
+  ...
+};
+```
+
+### Include tailwind.css in your Remix app
+
+In your `app/root.tsx` file, import the `tailwind.css` file:
+
+```js {1, 4}
+import styles from "./tailwind.css"
+
+export const links: LinksFunction = () => [
+  { rel: "stylesheet", href: styles },
+  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
+]
+```
+
+</Steps>