Gatsby

Install and configure Gatsby.

Create project

Start by creating a new Gatsby project using create-gatsby:

npm init gatsby

Configure your Gatsby project to use TypeScript and Tailwind CSS

You will be asked a few questions to configure your project:

✔ 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 following code to the tsconfig.json file to resolve paths:

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

Create gatsby-node.ts file

Create a gatsby-node.ts file at the root of your project if it doesn’t already exist, and add the code below to the gatsby-node file so your app can resolve paths:

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 the CLI

Run the shadcn-ui init command to setup your project:

npx shadcn@latest init

Configure components.json

You will be asked a few questions to configure components.json:

Would you like to use TypeScript (recommended)? no / yes
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.

npx shadcn@latest registry add @blode=https://blode.co/ui/r/{name}.json
npx shadcn@latest add @blode/ui
npx shadcn@latest add @blode/button

@blode/ui is the design system: it writes Blode's tokens into your CSS. Skip it and components install but render unstyled, because their variants compile to rounded-[var(--field-radius)] and h-[var(--field-height)].

The command above will add the Button component to your project. You can then import it like this:

import { Button } from "@/components/ui/button";
 
export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}

On This Page

Create project Configure your Gatsby project to use TypeScript and Tailwind CSS Edit tsconfig.json file Create gatsby-node.ts file Run the CLI Configure components.json That's it