Wedges

Create Project

Begin by initializing a new project with Vite:

pnpm create vite

Then follow the prompts to create a React project. Typescript is recommended but not required. Once the installation is complete, run the following command to navigate to your project directory:

cd my-vite-app

Ensure to replace my-vite-app with the actual name you chose for your project during installation.

Install Wedges

pnpm add @lemonsqueezy/wedges

Install Tailwind CSS

By default, Vite doesn’t install Tailwind CSS, so we’ll need to do that manually.

More information can be found in the official Tailwind CSS installation guide.

Let’s start by installing the Tailwind CSS and its peer dependencies:

pnpm add tailwindcss postcss autoprefixer -D

Then generate your tailwind.config.js and postcss.config.js files by running the following command:

pnpm dlx tailwindcss init -p

Configure Tailwind CSS

Once Tailwind CSS is installed, update tailwind.config.js file to add the necessary configuration for Wedges:

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

Setup pnpm (optional)

If you’re using pnpm, add the following line to your .npmrc file:

public-hoist-pattern[]=*@lmsqueezy/*

This ensures that pnpm correctly handles dependencies for Wedges, allowing necessary packages to be accessible at the top level of your node_modules.

After updating, run pnpm install again to reconfigure your dependencies correctly.

That’s all

You can now start using the components in your application.

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