diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts
index 56cb80004e..a9a8232760 100644
--- a/apps/www/config/docs.ts
+++ b/apps/www/config/docs.ts
@@ -98,6 +98,11 @@ export const docsConfig: DocsConfig = {
href: "/docs/installation/remix",
items: [],
},
+ {
+ title: "Gatsby",
+ href: "/docs/installation/gatsby",
+ items: [],
+ },
{
title: "Manual",
href: "/docs/installation/manual",
diff --git a/apps/www/content/docs/installation/gatsby.mdx b/apps/www/content/docs/installation/gatsby.mdx
new file mode 100644
index 0000000000..acc62c1824
--- /dev/null
+++ b/apps/www/content/docs/installation/gatsby.mdx
@@ -0,0 +1,118 @@
+---
+title: Gatsby
+description: Install and configure Gatsby.
+---
+
+
+
+### Create project
+
+Start by creating a new Gatsby project using `Gatsby CLI`:
+
+```bash
+npx gatsby new
+```
+
+### Configure your Gatsby project to use TypeScript and Tailwind CSS
+
+You will be asked a few questions to configure your project:
+
+```txt showLineNumbers
+✔ What would you like to call your site?
+· your-app-name
+✔ What would you like to name the folder where your site will be created?
+· your-app-name
+✔ Will you be using JavaScript or TypeScript?
+· TypeScript
+✔ Will you be using a CMS?
+· Choose whatever you want
+✔ Would you like to install a styling system?
+· Tailwind CSS
+✔ Would you like to install additional features with other plugins?
+· Choose whatever you want
+✔ Shall we do this? (Y/n) · Yes
+```
+
+### Edit tsconfig.json file
+
+Add the code below to the tsconfig.json file to resolve paths:
+
+```ts {4-9} showLineNumbers
+{
+ "compilerOptions": {
+ // ...
+ "baseUrl": ".",
+ "paths": {
+ "@/*": [
+ "./src/*"
+ ]
+ }
+ // ...
+ }
+}
+```
+
+### Create gatsby-node.js file
+
+Create a `gatsby-node.js` file at the root of your project if it doesn’t already exist, and add the code below to the `gatsby-node.js` file so your app can resolve paths:
+
+```js
+const path = require("path")
+exports.onCreateWebpackConfig = ({ actions }) => {
+ actions.setWebpackConfig({
+ resolve: {
+ alias: {
+ "@/components": path.resolve(__dirname, "src/components"),
+ "@/lib/utils": path.resolve(__dirname, "src/lib/utils"),
+ },
+ },
+ })
+}
+```
+
+### 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/styles/globals.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
+```
+
+### That's it
+
+You can now start adding components to your project.
+
+```bash
+npx shadcn-ui@latest add button
+```
+
+The command above will add the `Button` component to your project. You can then import it like this:
+
+```tsx {1,6} showLineNumbers
+import { Button } from "@/components/ui"
+
+export default function Home() {
+ return (
+
+
+
+ )
+}
+```
+
+
diff --git a/apps/www/content/docs/installation/index.mdx b/apps/www/content/docs/installation/index.mdx
index 325ce60334..a3aca8cc28 100644
--- a/apps/www/content/docs/installation/index.mdx
+++ b/apps/www/content/docs/installation/index.mdx
@@ -43,6 +43,19 @@ description: How to install dependencies and structure your app.