Gatsby • Wedges Documentation

Create Gatsby Project

To set up a new project, run the following command in your terminal:

pnpm create gatsby

Configure Project

The system will prompt you with several configuration queries:

What would you like to call your site?
- My Gatsby Project
 
What would you like to name the folder where your site will be created?
- ./my-gatsby-project
 
Will you be using JavaScript or TypeScript?
- Typescript
 
Will you be using a CMS?
- Choose your answer
 
Would you like to install a styling system?
- Tailwind CSS
 
Would you like to install additional features with other plugins?
- Choose your answer
 
Shall we do this?
- Yes

After the installation navigate to the project folder:

cd my-gatsby-project

Install Wedges

pnpm add @lemonsqueezy/wedges

Configure Tailwind CSS

Update your tailwind.config.js file to add the necessary configuration for Wedges:

tailwind.config.js

const { wedgesTW } = require("@lemonsqueezy/wedges");
 
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/pages/**/.{js,jsx,ts,tsx}',
    './src/components/**/*.{js,jsx,ts,tsx}',
    'node_modules/@lemonsqueezy/wedges/dist/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [wedgesTW()],
}

Using the Components

That's all. You can now start using the components in your application.

import { Alert } from "@lemonsqueezy/wedges";
 
export default function ExampleComponent() {
  return <Alert>You're awesome!</Alert>;
}