Install shadcn/ui in Gatsby projects with static site generation and React components. Complete setup guide for TypeScript and Tailwind CSS.

Need help installing shadcn on Gatsby?

Join our Discord community for help from other developers.

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