Gatsby

Step 1: Initialize Your Gatsby Project

Begin the installation process by creating a new Gatsby project using the create-gatsby command-line tool:

npm init gatsby

Step 2: Configure Your Gatsby Project with TypeScript and Tailwind CSS

During the project creation process, you will be prompted with a series of questions to configure your Gatsby project. Ensure you select TypeScript and Tailwind CSS when prompted:

✔ 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

Step 3: Configure Path Aliases in tsconfig.json

Modify your tsconfig.json file to include path aliases. This configuration is necessary for correctly resolving module paths within your project, particularly for components:

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

Step 4: Create or Modify gatsby-node.ts for Path Resolution

Create a gatsby-node.ts file at the root of your project if it doesn't already exist. Add the following code snippet to this file to configure Webpack for resolving the defined path aliases, ensuring your application can correctly locate modules:

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

Step 5: Execute the shadcn/ui Initialization Command

Run the shadcn/ui initialization command in your terminal to configure your project for using shadcn/ui components:

npx shadcn@latest init

Step 6: Configure the components.json File

You will be guided through a series of questions to configure the components.json file. This file is essential for customizing the behavior and location of shadcn/ui components within your project. Respond to the prompts as follows:

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

Step 7: Begin Adding Components

You have successfully completed the initial setup. You can now begin adding individual shadcn/ui components to your Gatsby project as needed.

npx shadcn@latest add button

Executing the command shown above will add the Button component files to your project structure. You can then import and use the component in your Gatsby files as demonstrated below:

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

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