Next.js — Wedges | Lemon Squeezy

Wedges is fully compatible with the latest version of Next.js, supporting both app and page routers. It works with both server and client components, due to the 'use client' directive added to the components.

Follow the instructions on this page to add Wedges into your Next.js project.

Starter Template

The easiest way to get started with Next.js is by using create-next-app with our example template.

Installation

To create a fresh Next.js project with Wedges pre-configured, run the following command:

pnpm create next-app -e https://github.com/lmsqueezy/wedges-next-app-template

You will then be asked the following prompt:

What is your project named?  my-app

Start dev server

Once the installation is complete, run the following command to navigate to your project directory:

cd my-app

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

After that, run the following command to start the development server:

pnpm dev

Using the components

That’s all. You can now start using the components in your project.

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

Manual Installation

Install Wedges

pnpm add @lemonsqueezy/wedges

Configure Tailwind CSS

Wedges requires Tailwind CSS to be installed prior to use. If you haven’t installed it already, follow the instructions in the official Tailwind CSS installation guide.

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

tailwind.config.ts

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

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>;
}

Wedges