Wedges

Create Laravel project

To set up a new Laravel project with Inertia and React, run the following command in your terminal:

laravel new my-laravel-app --typescript --breeze --stack=react --git --no-interaction

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.js file to add the necessary configuration for Wedges:

import { wedgesTW } from "@lemonsqueezy/wedges";
 
/** @type {import('tailwindcss').Config} */
export default {
    content: [
      './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
      './storage/framework/views/*.php',
      './resources/views/**/*.blade.php',
      './resources/js/**/*.tsx',
      'node_modules/@lemonsqueezy/wedges/dist/**/*.{js,ts,jsx,tsx}',
    ],
    theme: {},
    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.

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