How to install shadcn/ui in Gatsby projects. Setup guide for static site generation with React components.

How to install shadcn/ui with Gatsby

Gatsby's static site generation combined with shadcn/ui components gives you blazing fast marketing sites, blogs, and documentation with interactive elements where needed.

Gatsby setup guide

Create a new Gatsby site

npm init gatsby
cd my-gatsby-site

Follow the prompts, choosing:

TypeScript (recommended)
Tailwind CSS for styling

Configure path mapping

Add to tsconfig.json:

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

Update gatsby-node.js:

const path = require("path")

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src"),
      },
    },
  })
}

Initialize shadcn/ui

npx shadcn@latest init

Configure when prompted:

Style: Choose your preference
Base color: Pick your theme
CSS variables: Yes (recommended)

Add components

npx shadcn@latest add button card navigation-menu

Use in your pages:

// src/pages/index.tsx
import * as React from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

const IndexPage = () => {
  return (
    <main className="container mx-auto p-8">
      <Card>
        <CardHeader>
          <CardTitle>Welcome to Gatsby + shadcn/ui</CardTitle>
        </CardHeader>
        <CardContent>
          <p>Build fast sites with beautiful components</p>
          <Button className="mt-4">Get Started</Button>
        </CardContent>
      </Card>
    </main>
  )
}

export default IndexPage

File structure

gatsby-config.js

components.json

Deployment

Gatsby + shadcn/ui deploys anywhere:

Platform	Setup	Best For
Gatsby Cloud	Optimized for Gatsby	Official Gatsby hosting
Netlify/Vercel	Great DX and previews	Excellent developer experience
AWS S3 + CloudFront	Cost-effective at scale	Enterprise scale and control
GitHub Pages	Free for open source	Free static site hosting

Common issues

Build errors

If you get module resolution errors during build:

// gatsby-node.js
exports.onCreateWebpackConfig = ({ stage, actions }) => {
  if (stage === "build-javascript" || stage === "develop") {
    actions.setWebpackConfig({
      resolve: {
        alias: {
          "@": path.resolve(__dirname, "src"),
        },
      },
    })
  }
}

Styling in production

Ensure Tailwind processes all component files:

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
}

Next steps

With Gatsby + shadcn/ui configured:

Browse official components for forms, tables, and UI elements
Add charts for data visualization
Explore community components for extended functionality
Add useful hooks to enhance your components
Use pre-built blocks to quickly build common layouts

Gatsby's powerful data layer and build optimizations paired with shadcn/ui's component library creates perfect static sites that load instantly.

Install shadcn/ui Gatsby