Gatsby
Start using Wedges with Gatsby.
Create Gatsby Project
To set up a new project, run the following command in your terminal:
pnpm create gatsbyConfigure 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?
- YesAfter the installation navigate to the project folder:
cd my-gatsby-projectInstall Wedges
pnpm add @lemonsqueezy/wedgesConfigure Tailwind CSS
Update your tailwind.config.js file to add the necessary configuration for Wedges:
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>;
}