Astro — Wedges | Lemon Squeezy

Setting up Astro

Create project

To set up a new Astro project, run the following command in your terminal:

pnpm create astro@latest

More information can be found in the official Astro Documentation.

Configure project

The system will prompt you with several configuration queries:

Where should we create your new project?
- ./my-astro-project
 
How would you like to start your new project?
- Include sample files (recommended)
 
Install dependencies?
- Yes
 
Do you plan to write Typescript?
- Yes
 
How strict should TypeScript be?
- Strict
 
Initialize a new git repository?
- Yes/No

After the installation is complete, navigate to your project directory:

cd my-astro-project

Add React and Tailwind

To install React and Tailwind CSS, run the following command:

pnpm astro add react tailwind --yes

Setting up Wedges

Install Wedges

pnpm add @lemonsqueezy/wedges

Configure Tailwind CSS

Update your tailwind.config.mjs file to add the necessary configuration for Wedges:

tailwind.config.mjs

import { wedgesTW } from "@lemonsqueezy/wedges";
 
/** @type {import('tailwindcss').Config} */
const config = {
  content: [
    './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
    '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.

Using the components

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

---
import { Alert } from "@lemonsqueezy/wedges";
---
 
<html lang="en">
	<head>
		<title>Astro</title>
	</head>
	<body>
		<Alert>Hello World</Alert>
	</body>
</html>

Wedges