Gatsby

Install shadcn/ui in Gatsby with the official CLI. Tailwind v3, webpack aliases, then add a component from the shadcn.io registry.

Official still documents Gatsby on Tailwind v3. For a new site, prefer Next.js, Vite, or Astro — those ship Tailwind v4. Existing Gatsby: npm init gatsby, TypeScript + Tailwind, then the alias files, then init.

Tailwind v3 only

This guide is Gatsby + Tailwind v3. New work should use a framework that supports v4.

Create the project

npm init gatsby

Prompts:

✔ 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

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

gatsby-node.ts

Create it at the repo root if it is missing.

gatsby-node.ts

import * as path from "path"

export const onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        "@/components": path.resolve(__dirname, "src/components"),
        "@/lib/utils": path.resolve(__dirname, "src/lib/utils"),
      },
    },
  })
}

Run init

npx shadcn@latest init

Add a component

npx shadcn@latest add https://www.shadcn.io/r/button.json

import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}