Vite
Start using Wedges with Vite.
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>;
}