### Starting Next.js Development Server (Bash)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/README.md

These commands show how to start the local development server for the Next.js application. They execute the 'dev' script defined in the project's package.json using different Node.js package managers: npm, yarn, pnpm, or bun. After running, the application is typically accessible via http://localhost:3000.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Starting Remix Development Server - Bash

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/remix.mdx

This snippet provides the commands to start the Remix development server using pnpm, npm, or yarn. Running this command compiles your application and serves it locally, allowing you to see the changes and use the installed Wedges components.

```bash
pnpm dev
```

```bash
npm run dev
```

```bash
yarn dev
```

--------------------------------

### Starting Development Server (PNPM) - Bash

Source: https://github.com/lmsqueezy/wedges/blob/main/packages/wedges/README.md

This command starts the development server for the Wedges monorepo, typically utilizing Turborepo's task running capabilities configured to run the 'dev' script in relevant packages (like the documentation site). This allows developers to view and test changes locally.

```bash
pnpm dev
```

--------------------------------

### Starting Development Servers (PNPM) - Shell

Source: https://github.com/lmsqueezy/wedges/blob/main/CONTRIBUTING.md

Executes the script to start the development environment. This typically launches the Next.js documentation site and initiates `tsup` in watch mode for the UI library code, enabling live reloading during development. Requires PNPM and Node.js (v16+ recommended) to be installed.

```Shell
pnpm dev
```

--------------------------------

### Using a Wedges Component Example - TSX

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/manual.mdx

Demonstrates a basic example of how to import and use a simple Wedges component (the `Alert` component) within a React/Next.js functional component. Shows the required import statement and JSX usage. Requires Wedges and React/Next.js setup.

```tsx
import { Alert } from "@lemonsqueezy/wedges";

export default function Example() {
  return <Alert>You're awesome!</Alert>;
}
```

--------------------------------

### Creating Laravel Project with Inertia/React - Bash

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/laravel.mdx

Use this command to generate a new Laravel project pre-configured with TypeScript, Breeze authentication scaffolding, Inertia.js with React frontend, Git initialization, and non-interactive setup. Requires Laravel Installer 5.2.0+.

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

--------------------------------

### Installing Monorepo Dependencies (PNPM) - Bash

Source: https://github.com/lmsqueezy/wedges/blob/main/packages/wedges/README.md

This command installs all necessary dependencies for the Wedges monorepo, leveraging PNPM's efficient package management and hoists dependencies to the root for better compatibility with certain tools. It's required to set up the project after cloning.

```bash
pnpm i --hoist
```

--------------------------------

### Starting Next.js development server - Bash

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/nextjs.mdx

Execute the command to start the Next.js development server. This will typically compile your application and serve it locally, allowing you to see your changes live.

```Bash
pnpm dev
```

```Bash
npm run dev
```

```Bash
yarn dev
```

--------------------------------

### Install Wedges Component Library

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/vite.mdx

Add the @lemonsqueezy/wedges library as a project dependency using your preferred package manager.

```bash
pnpm add @lemonsqueezy/wedges
```

```bash
npm i @lemonsqueezy/wedges
```

```bash
yarn add @lemonsqueezy/wedges
```

--------------------------------

### Installing Wedges Package - Bash

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/manual.mdx

Instructions for installing the Wedges UI library package using different package managers. This is the first step to integrate Wedges into a project. Requires a package manager like pnpm, npm, or yarn.

```bash
pnpm add @lemonsqueezy/wedges
```

```bash
npm i @lemonsqueezy/wedges
```

```yarn
yarn add @lemonsqueezy/wedges
```

--------------------------------

### Using a Wedges Component Example - TSX

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/remix.mdx

This snippet provides a simple example of how to import and use a Wedges component, specifically the `Alert` component, within a Remix route component (e.g., `./app/routes/index.tsx`). It demonstrates the basic syntax for rendering a Wedges component after setup is complete.

```tsx
import { Alert } from "@lemonsqueezy/wedges";

export default function Index() {
  return <Alert>You're awesome!</Alert>;
}
```

--------------------------------

### Installing Dependencies with PNPM (Bash)

Source: https://github.com/lmsqueezy/wedges/blob/main/README.md

This bash command uses the PNPM package manager to install all necessary project dependencies across the monorepo. The `--hoist` flag is included, which affects how dependencies are structured in the node_modules folder, typically relevant in monorepo setups for compatibility or optimization.

```bash
pnpm i --hoist
```

--------------------------------

### Installing Wedges Library - Bash

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/remix.mdx

This snippet shows the commands for adding the `@lemonsqueezy/wedges` package to your Remix project's dependencies using pnpm, npm, or yarn. Installing this package is necessary to use the Wedges components.

```bash
pnpm add @lemonsqueezy/wedges
```

```bash
npm i @lemonsqueezy/wedges
```

```bash
yarn add @lemonsqueezy/wedges
```

--------------------------------

### Rendering Installation Manual Link Card JSX

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/getting-started/installation.mdx

This JSX code renders a 'LinkCard' component that serves as a navigation element. It links to '/installation/manual', includes a 'Logomark' icon labeled 'Manual', displays the text 'Manual', and provides a 'Tooltip' indicating it's for React + Tailwind CSS stacks. It utilizes several Tailwind CSS classes for styling.

```JSX
<LinkCard className='col-span-2 md:col-span-3' href="/installation/manual">
  <Logomark className='-mx-2 fill-current size-10 shrink-0' aria-label="Manual"/>

  <p className='font-medium flex items-center gap-1 text-sm'>
      <span>Manual</span>
      <Tooltip content="For any stack with React + Tailwind CSS."/>
  </p>
</LinkCard>
</div>
```

--------------------------------

### Using Wedges Component in Astro File

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/astro.mdx

Example demonstrating how to import and use a Wedges component, like the `Alert` component, within an Astro (`.astro`) file after completing the setup steps.

```tsx
---
import { Alert } from "@lemonsqueezy/wedges";
---

<html lang="en">
	<head>
		<title>Astro</title>
	</head>
	<body>
		<Alert>Hello World</Alert>
	</body>
</html>
```

--------------------------------

### Basic Input Component Usage (tsx)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/input.mdx

Provides a minimal example of how to render the `Input` component using JSX. This shows the simplest instantiation of the component without any specific props.

```tsx
<Input />
```

--------------------------------

### Install Tailwind CSS Dependencies

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/vite.mdx

Install Tailwind CSS, PostCSS, and Autoprefixer as development dependencies. These are required for styling Wedges components.

```bash
pnpm add tailwindcss postcss autoprefixer -D
```

```bash
npm install tailwindcss postcss autoprefixer -D
```

```bash
yarn install tailwindcss postcss autoprefixer -D
```

--------------------------------

### Basic Wedges Component Usage (React/TSX)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/vite.mdx

Example demonstrating how to import and use a basic Wedges component (Alert) within a React/TSX application file.

```tsx
import { Alert } from "@lemonsqueezy/wedges";

export default function Example() {
  return <Alert>You're awesome!</Alert>;
}
```

--------------------------------

### Starting Development Server with PNPM (Bash)

Source: https://github.com/lmsqueezy/wedges/blob/main/README.md

This bash command executes the 'dev' script defined in the project's package.json file using PNPM. It is used to launch the local development server, enabling developers to work on and test the UI library components and documentation locally.

```bash
pnpm dev
```

--------------------------------

### Creating New Astro Project (Various Package Managers)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/astro.mdx

Run one of these commands in your terminal to initiate a new Astro project setup process. The system will prompt you for configuration details after running the command.

```bash
pnpm create astro@latest
```

```bash
npm create astro@latest
```

```bash
yarn create astro
```

--------------------------------

### Installing Wedges library manually - Bash

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/nextjs.mdx

Add the `@lemonsqueezy/wedges` package to your existing Next.js project using your preferred package manager (pnpm, npm, or yarn). This is the first step for manual installation.

```Bash
pnpm add @lemonsqueezy/wedges
```

```Bash
npm i @lemonsqueezy/wedges
```

```Bash
yarn add @lemonsqueezy/wedges
```

--------------------------------

### Managing Changelog (PNPM) - Shell

Source: https://github.com/lmsqueezy/wedges/blob/main/CONTRIBUTING.md

Initiates the Changesets CLI tool for managing changelog generation and release preparation. This command interactively guides the user through describing the changes made in a pull request, which is then used to generate release notes automatically. Requires PNPM and Changesets setup.

```Shell
pnpm changeset
```

--------------------------------

### Installing Wedges with pnpm - Bash

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/laravel.mdx

Add the @lemonsqueezy/wedges package to your project dependencies using the pnpm package manager. This command fetches the latest version and adds it to your package.json.

```bash
pnpm add @lemonsqueezy/wedges
```

--------------------------------

### Installing Wedges with npm - Bash

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/laravel.mdx

Install the @lemonsqueezy/wedges package into your project dependencies using the npm package manager. This command downloads the package and updates your package.json and package-lock.json.

```bash
npm i @lemonsqueezy/wedges
```

--------------------------------

### Example Implementation of Wedges Blue Color Scale - TypeScript

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/theming/color-system.mdx

Provides a concrete example of a `ColorScale` object for the 'wg_blue' color, showing the specific hex color codes assigned to each step in the 10-step scale and the `DEFAULT` value. This requires the `ColorScale` type definition to be imported or available.

```typescript
import type { ColorScale } from "@lemonsqueezy/wedges";

const wg_blue: ColorScale = {
  50: "#F0FAFF",
  100: "#DBF3FF",
  200: "#ADE4FF",
  300: "#70D1FF",
  400: "#38BEFF",
  500: "#00ACFF",
  600: "#0090D6",
  700: "#0075AD",
  800: "#005985",
  900: "#003E5C",
  DEFAULT: "#00ACFF"
};
```

--------------------------------

### Configure pnpm Hoisting (Optional)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/vite.mdx

If using pnpm, add this configuration line to your `.npmrc` file to ensure correct dependency hoisting for Wedges. Run `pnpm install` after updating.

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

--------------------------------

### Installing Wedges with yarn - Bash

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/laravel.mdx

Add the @lemonsqueezy/wedges package to your project dependencies using the Yarn package manager. This command fetches the package and updates your package.json and yarn.lock file.

```bash
yarn add @lemonsqueezy/wedges
```

--------------------------------

### Install Wedges UI Component Library

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/astro.mdx

Add the Wedges UI library to your Astro project's dependencies using your package manager.

```bash
pnpm add @lemonsqueezy/wedges
```

```bash
npm i @lemonsqueezy/wedges
```

```bash
yarn add @lemonsqueezy/wedges
```

--------------------------------

### Using Wedges Alert Component - React/TSX

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/laravel.mdx

Import the `Alert` component from the `@lemonsqueezy/wedges` library and use it within your React components. This snippet provides a basic example of how to integrate and render a Wedges UI component in a TSX file.

```tsx
import { Alert } from "@lemonsqueezy/wedges";

export default function ExampleComponent() {
  return <Alert>You're awesome!</Alert>;
}
```

--------------------------------

### Responding to Gatsby Project Configuration Prompts

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/gatsby.mdx

This text snippet shows example responses to the prompts displayed during the Gatsby project creation process. It illustrates common choices for site name, folder, language (TypeScript), CMS, styling (Tailwind CSS), and feature plugins.

```txt
What would you like to call your site?
- My Gatsby Project

What would you like to name the folder where your site will be created?
- ./my-gatsby-project

Will you be using JavaScript or TypeScript?
- Typescript

Will you be using a CMS?
- Choose your answer

Would you like to install a styling system?
- Tailwind CSS

Would you like to install additional features with other plugins?
- Choose your answer

Shall we do this?
- Yes
```

--------------------------------

### Installing Tailwind CSS Dev Dependency - Bash

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/remix.mdx

This snippet provides the commands to install Tailwind CSS as a development dependency in your Remix project using pnpm, npm, or yarn. Tailwind CSS is required to style the Wedges components.

```bash
pnpm add tailwindcss -D
```

```bash
npm install tailwindcss -D
```

```bash
yarn install tailwindcss -D
```

--------------------------------

### Building Project (PNPM) - Shell

Source: https://github.com/lmsqueezy/wedges/blob/main/CONTRIBUTING.md

Runs the script to build the project for production. This includes creating production builds for the UI library using `tsup` and the documentation site using Next.js, and also performs linting checks to ensure code quality before deployment. Requires PNPM and Node.js (v16+ recommended) to be installed.

```Shell
pnpm build
```

--------------------------------

### Navigating to the New Gatsby Project Directory

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/gatsby.mdx

After the Gatsby project is created, use this command to change your current directory in the terminal to the newly created project folder. This is necessary before installing dependencies.

```bash
cd my-gatsby-project
```

--------------------------------

### Using the Kbd Component - TSX

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/kbd.mdx

Shows a basic usage example of the `Kbd` component within a TSX context. It displays the 'K' key along with the 'option' and 'command' modifier keys visually. Requires the component to be imported first.

```tsx
<Kbd keys={"["option", "command"]"}>K<\/Kbd>
```

--------------------------------

### Configuring pnpm hoisting for Wedges - Configuration

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/nextjs.mdx

If using pnpm, add this line to your `.npmrc` file. It helps manage dependencies by hoisting necessary packages to the top level, ensuring Wedges functions correctly. Run `pnpm install` after adding.

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

--------------------------------

### Installing Wedges using npm, yarn, or pnpm

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/gatsby.mdx

Execute one of these commands within your Gatsby project directory to add the @lemonsqueezy/wedges package as a dependency. This makes the component library available for use in your project.

```bash
pnpm add @lemonsqueezy/wedges
```

```bash
npm i @lemonsqueezy/wedges
```

```bash
yarn add @lemonsqueezy/wedges
```

--------------------------------

### Basic Switch Usage with Label (tsx)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/switch.mdx

Demonstrates how to render a basic 'Switch' component in JSX, including a text label. This is a simple example showing the component's structure.

```tsx
<Switch label="Label" />
```

--------------------------------

### Using Basic RadioGroup Component (TSX)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/radio-group.mdx

Shows a simple example of the `RadioGroup` component with two selectable items. It uses `defaultValue` to set the initial checked item and provides a `label` for the group. Requires the `RadioGroup` and `RadioGroup.Item` components to be imported.

```tsx
<RadioGroup defaultValue="value-1" label="Label">
  <RadioGroup.Item label="Value 1" value="value-1" />
  <RadioGroup.Item label="Value 2" value="value-2" />
</RadioGroup>
```

--------------------------------

### Basic Wedges Select Usage (TSX)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/select.mdx

This snippet provides a minimal example of how to use the Wedges Select component with its basic structure. It demonstrates nesting SelectTrigger, SelectContent, SelectGroup, and multiple SelectItem components within the main Select container.

```tsx
<Select>
  <SelectTrigger />
    <SelectContent>
      <SelectGroup>
        <SelectItem value="item-1">Item 1</SelectItem>
        <SelectItem value="item-2">Item 2</SelectItem>
        <SelectItem value="item-3">Item 3</SelectItem>
      </SelectGroup>
    </SelectContent>
</Select>
```

--------------------------------

### Adding React and Tailwind Integrations to Astro

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/astro.mdx

Install the official Astro integrations for React and Tailwind CSS using your preferred package manager. These are required dependencies for using Wedges components.

```bash
pnpm astro add react tailwind --yes
```

```bash
npx astro add react tailwind --yes
```

```bash
yarn astro add react tailwind --yes
```

--------------------------------

### Running Project Tests (PNPM) - Shell

Source: https://github.com/lmsqueezy/wedges/blob/main/CONTRIBUTING.md

Executes the Jest test runner for the repository. This command runs all defined tests (likely using React Testing Library for components) to verify that code changes have not introduced regressions and that new features function as expected. Requires PNPM and Jest setup.

```Shell
pnpm test
```

--------------------------------

### Configuring pnpm Hoisting for Wedges

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/laravel.mdx

Add this line to your `.npmrc` file when using pnpm to ensure that packages within the `@lmsqueezy` scope are hoisted to the top level. This is an optional step that helps resolve potential dependency issues specific to pnpm and Wedges.

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

--------------------------------

### Rendering Basic Checkbox - TSX

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/checkbox.mdx

Demonstrates how to render a basic Checkbox component with a label using the @lemonsqueezy/wedges library. This example shows the simplest way to use the component in a React application.

```tsx
<Checkbox label="Label" />
```

--------------------------------

### Importing ProgressBar Component - TypeScript

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/progress-bar.mdx

This snippet shows how to import the `ProgressBar` component from the `@lemonsqueezy/wedges` library. This import is required before the component can be used in a TSX or JSX file. Ensure the `@lemonsqueezy/wedges` package is installed.

```typescript
import { ProgressBar } from "@lemonsqueezy/wedges";
```

--------------------------------

### Checking Code Formatting (PNPM) - Shell

Source: https://github.com/lmsqueezy/wedges/blob/main/CONTRIBUTING.md

Executes the Prettier formatter across the repository in check mode. This command verifies whether the code adheres to the project's Prettier configuration without making any modifications. It's part of the required checks before submitting contributions. Requires PNPM and Prettier setup.

```Shell
pnpm format
```

--------------------------------

### Fixing Code Formatting (PNPM) - Shell

Source: https://github.com/lmsqueezy/wedges/blob/main/CONTRIBUTING.md

Runs the Prettier formatter with the `--write` option across the repository. This command automatically reformats the code according to the project's Prettier configuration, ensuring consistent code style throughout the codebase. Requires PNPM and Prettier setup.

```Shell
pnpm format:fix
```

--------------------------------

### Adding Empty Changelog Entry (PNPM) - Shell

Source: https://github.com/lmsqueezy/wedges/blob/main/CONTRIBUTING.md

Adds an empty changeset file using the Changesets CLI. This is used for contributions that don't warrant a formal changelog entry (e.g., CI configuration updates, pure documentation fixes that aren't tied to code changes) but still need to be tracked by the release process. Requires PNPM and Changesets setup.

```Shell
pnpm changeset add --empty
```

--------------------------------

### Importing Tag Component - TSX

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/tag.mdx

Explains how to import the Tag component from the @lemonsqueezy/wedges package. This is the standard way to make the component available for use in a React/TSX file. It requires the @lemonsqueezy/wedges package installed as a dependency.

```TSX
import { Tag } from "@lemonsqueezy/wedges";
```

--------------------------------

### Importing CheckboxGroup Component in TSX

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/checkbox-group.mdx

Imports the `CheckboxGroup` component from the `@lemonsqueezy/wedges` library. This is the necessary first step to using the component in a React/TSX file. Requires the `@lemonsqueezy/wedges` package installed.

```tsx
import { CheckboxGroup } from "@lemonsqueezy/wedges";
```

--------------------------------

### Using Wedges Alert component in Next.js - TSX

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/nextjs.mdx

This example demonstrates how to import and use a Wedges component, specifically the `Alert` component, within a React functional component in your Next.js application.

```TSX
import { Alert } from "@lemonsqueezy/wedges";

export default function Example() {
  return <Alert>You're awesome!</Alert>;
}
```

--------------------------------

### Running Code Linting (PNPM) - Shell

Source: https://github.com/lmsqueezy/wedges/blob/main/CONTRIBUTING.md

Executes the ESLint linter across the entire monorepo. This command identifies potential code quality and style issues based on the project's ESLint configuration. It's a prerequisite for passing GitHub Actions checks before submitting a pull request. Requires PNPM and ESLint setup.

```Shell
pnpm lint
```

--------------------------------

### Creating a New Remix Project - Bash

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/remix.mdx

This snippet provides the terminal commands to initialize a new Remix project using the latest version of `create-remix` and navigate into the newly created project directory. It is the first step required to set up a Remix environment for integrating Wedges.

```bash
npx create-remix@latest my-remix-app
cd my-remix-app
```

--------------------------------

### Configuring Tailwind CSS for Wedges - TSX

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/manual.mdx

Shows how to modify the Tailwind CSS configuration file (`tailwind.config.ts` or `.js`) to include Wedges styles. This involves adding the Wedges library path to the content array and registering the Wedges plugin. Requires Tailwind CSS to be installed.

```tsx
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;
```

--------------------------------

### Configuring Tailwind CSS with Wedges - JavaScript

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/laravel.mdx

Modify your Tailwind CSS configuration file (`tailwind.config.js`) to include the Wedges Tailwind plugin (`wedgesTW`) and ensure the content paths include the Wedges component files for purging unused styles. This is a required step for Wedges to function correctly.

```javascript
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()],
};
```

--------------------------------

### Using a Wedges Component in a Gatsby Page/Component

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/gatsby.mdx

Import a Wedges component, like `Alert`, and use it within your React components or Gatsby pages. This demonstrates how to incorporate a Wedges component into your application's UI structure after installation and configuration.

```tsx
import { Alert } from "@lemonsqueezy/wedges";

export default function ExampleComponent() {
  return <Alert>You're awesome!</Alert>;
}
```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/vite.mdx

Change the current directory to the root of your newly created Vite project.

```bash
cd my-vite-app
```

--------------------------------

### Fixing Code Linting Issues (PNPM) - Shell

Source: https://github.com/lmsqueezy/wedges/blob/main/CONTRIBUTING.md

Runs the ESLint linter with the `--fix` option across the monorepo. This command attempts to automatically resolve identified code quality and style issues where possible, helping contributors adhere to the project's coding standards. Requires PNPM and ESLint setup.

```Shell
pnpm lint:fix
```

--------------------------------

### Create Vite Project using pnpm, npm, or yarn

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/vite.mdx

Initialize a new project using Vite with your preferred package manager (pnpm, npm, or yarn). Follow the prompts to select React and optionally TypeScript.

```bash
pnpm create vite
```

```bash
npm create vite@latest
```

```bash
yarn create vite
```

--------------------------------

### Customizing Wedges Colors in Tailwind Config - TypeScript

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/theming/color-system.mdx

Illustrates how to override or extend the default Wedges color definitions within the `theme.extend.colors` section of the Tailwind CSS configuration file (`tailwind.config.ts`). This example shows how to redefine the 'wg-red' color's default and 500 grade values.

```typescript
const config: Config = {
  // ...
  theme: {
    extend: {
      colors: {
        "wg-red": {
          DEFAULT: "#ff0000",
          500: "#ff0000"
        }
      }
    }
  },
  //...
};

export default config;
```

--------------------------------

### Using Tailwind and Wedges Color Classes - TSX

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/theming/color-system.mdx

Demonstrates how to apply color utility classes using both standard Tailwind CSS colors (without a prefix) and the Wedges custom color palette (using the 'wg-' prefix). It shows examples for a specific color grade and using the default color value when no grade is specified.

```tsx
<div class="bg-yellow-400">Easy</div> // Tailwind color
<div class="bg-wg-yellow-400">Peasy</div> // Wedges color
<div class="bg-wg-yellow">Lemon Squeezy</div> // uses yellow.DEFAULT color
```

--------------------------------

### Customizing Dark Theme Primary Color (Tailwind Config) TSX

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/theming/color-system.mdx

Illustrates how to customize the primary color specifically for the dark theme within the `tailwind.config.ts` file by configuring the `wedgesTW` plugin. This example shows providing a full, custom ten-step color scale object for the `primary` property under the `dark` theme settings.

```tsx
import { wedgesTW } from "@lemonsqueezy/wedges";
import type { Config } from "tailwindcss";

const config: Config = {
  // Other Tailwind CSS options...
  plugins: [
    wedgesTW({
      themes: {
        dark: {
          colors: {
            primary: {
              50: "#FFF9EB",
              100: "#FFF3D6",
              200: "#FFE7AD",
              300: "#FFDA85",
              400: "#FFCE5C",
              500: "#FFC233",
              600: "#FAAF00",
              700: "#C28800",
              800: "#8A6100",
              900: "#523900",
              DEFAULT: "#FFC233"
            }
          }
        },
        light: {
          colors: {
            // Define colors for `light` theme here...
          }
        }
      }
    })
  ]
};

export default config;
```

--------------------------------

### Initializing Tailwind CSS Configuration - Bash

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/remix.mdx

This snippet shows how to run the Tailwind CSS initialization command using npx, pnpm dlx, or yarn dlx to generate the `tailwind.config.ts` file. This file is essential for configuring Tailwind CSS, including specifying where to find your application's content and adding plugins like the one for Wedges.

```bash
pnpm dlx tailwindcss init --ts
```

```bash
npx tailwindcss init --ts
```

```bash
yarn dlx tailwindcss init --ts
```

--------------------------------

### Creating Next.js project with Wedges template - Bash

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/nextjs.mdx

Use the `create-next-app` command with the official Wedges Next.js template URL to quickly set up a new project pre-configured with Wedges. Select the command appropriate for your preferred package manager.

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

```Bash
npx create-next-app -e https://github.com/lmsqueezy/wedges-next-app-template
```

```Bash
yarn create next-app -e https://github.com/lmsqueezy/wedges-next-app-template
```

--------------------------------

### Initialize Tailwind CSS Configuration

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/vite.mdx

Generate the necessary configuration files for Tailwind CSS (`tailwind.config.js` and `postcss.config.js`) using the Tailwind CLI.

```bash
pnpm dlx tailwindcss init -p
```

```bash
npx tailwindcss init -p
```

```bash
yarn dlx tailwindcss init -p
```

--------------------------------

### Creating Gatsby Project using npm, yarn, or pnpm

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/gatsby.mdx

Run one of these commands in your terminal to initialize a new Gatsby project. The command uses your preferred package manager to set up the basic project structure and dependencies.

```bash
pnpm create gatsby
```

```bash
npm init gatsby
```

```bash
yarn create gatsby
```

--------------------------------

### Changing directory into Next.js project - Bash

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/nextjs.mdx

Navigate into the root directory of the Next.js project created by the `create-next-app` command. Remember to replace 'my-app' with the actual name you assigned to your project.

```Bash
cd my-app
```

--------------------------------

### Navigate to Astro Project Directory

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/astro.mdx

After successfully creating the Astro project, use this command to change your current directory to the newly created project folder.

```bash
cd my-astro-project
```

--------------------------------

### Next.js project name prompt - TXT

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/nextjs.mdx

This snippet shows the expected interactive prompt that appears after running the `create-next-app` command with the template, asking you to specify the name for your new project directory.

```TXT
What is your project named?  my-app
```

--------------------------------

### Importing Input Component (tsx)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/input.mdx

Demonstrates how to import the `Input` component from the `@lemonsqueezy/wedges` package. This is the necessary first step before using the component in a React application.

```tsx
import { Input } from "@lemonsqueezy/wedges";
```

--------------------------------

### Configuring pnpm Hoisting - Config

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/manual.mdx

Provides an optional configuration for pnpm users by adding a hoisting pattern to the `.npmrc` file. This helps ensure dependencies required by Wedges are correctly hoisted to the top level of `node_modules`. Requires using pnpm as the package manager.

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

--------------------------------

### Importing the Kbd Component - TSX

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/kbd.mdx

Demonstrates how to import the `Kbd` component from the `@lemonsqueezy/wedges` library. This is the necessary first step before using the component in a React/TSX application.

```tsx
import { Kbd } from "@lemonsqueezy/wedges";
```

--------------------------------

### Using Basic Badge Component (TSX/React)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/badge.mdx

Demonstrates the basic usage of the `Badge` component with simple text content. This snippet shows the minimum required code to render a default badge.

```tsx
<Badge>Label</Badge>
```

--------------------------------

### Importing Wedges Select Components (TSX)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/select.mdx

This snippet shows how to import the necessary components for building a Select dropdown from the @lemonsqueezy/wedges UI library. It lists the core components required for basic and advanced Select configurations.

```tsx
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectIcon,
  SelectItem,
  SelectPortal,
  SelectTrigger,
  SelectValue,
} from "@lemonsqueezy/wedges";
```

--------------------------------

### Importing Loading Component (TSX)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/loading.mdx

Imports the `Loading` component from the `@lemonsqueezy/wedges` package. This step is necessary before the component can be used in a React application.

```tsx
import { Loading } from "@lemonsqueezy/wedges";
```

--------------------------------

### Basic Loading Component Usage (TSX)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/loading.mdx

Renders the `Loading` component using its default properties. This shows the simplest way to display the basic loading indicator.

```tsx
<Loading />
```

--------------------------------

### Basic DropdownMenu usage - TSX

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/dropdown-menu.mdx

This snippet demonstrates a basic implementation of the `DropdownMenu` component structure. It shows how to wrap the trigger element (like a Button), define the menu content, group menu items, and include separators.

```tsx
<DropdownMenu>
	<DropdownMenu.Trigger asChild>
		<Button>Open Menu</Button>
	</DropdownMenu.Trigger>
	<DropdownMenu.Content>
		<DropdownMenu.Group>
			<DropdownMenu.Item>MenuItem</DropdownMenu.Item>
			<DropdownMenu.Item>MenuItem</DropdownMenu.Item>
		</DropdownMenu.Group>
		<DropdownMenu.Separator />
		<DropdownMenu.Group>
			<DropdownMenu.Item>MenuItem</DropdownMenu.Item>
			<DropdownMenu.Item>MenuItem</DropdownMenu.Item>
		</DropdownMenu.Group>
	</DropdownMenu.Content>
</DropdownMenu>
```

--------------------------------

### Advanced Tooltip Composition in TSX

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/tooltip.mdx

Shows how to build a Tooltip using its individual exported sub-components (Tooltip.Provider, Tooltip.Root, Tooltip.Trigger, Tooltip.Portal, Tooltip.Content, Tooltip.Arrow). This approach offers more flexibility and control over the tooltip's structure and behavior, allowing customization beyond the basic usage and leveraging Radix UI primitives for fine-grained control.

```tsx
<Tooltip.Provider>\n  <Tooltip.Root>\n    <Tooltip.Trigger />\n    <Tooltip.Portal>\n      <Tooltip.Content>\n        <Tooltip.Arrow />\n      </Tooltip.Content>\n    </Tooltip.Portal>\n  </Tooltip.Root>\n</Tooltip.Provider>
```

--------------------------------

### Basic Tooltip Usage with Content in TSX

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/tooltip.mdx

Demonstrates the simplest way to use the Tooltip component by providing the desired text or element content directly via the 'content' prop. This is suitable for quick, straightforward tooltip implementations where default behavior is acceptable.

```tsx
<Tooltip content="Tooltip Content" />
```

--------------------------------

### Using Basic SwitchGroup - TSX

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/switch-group.mdx

This snippet illustrates the basic implementation of the SwitchGroup component in TSX. It demonstrates how to wrap individual SwitchGroup.Item components within a SwitchGroup and provide a main label for the group.

```tsx
<SwitchGroup label="Label">
  <SwitchGroup.Item label="Option 1" />
  <SwitchGroup.Item label="Option 2" />
</SwitchGroup>
```

--------------------------------

### Basic Toggle Component Usage (TSX)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/toggle.mdx

Demonstrates the simplest way to render a Toggle component with basic text content. It shows the standard component tag usage within a TSX/JSX context.

```tsx
<Toggle>Toggle</Toggle>
```

--------------------------------

### Configure tailwind.config.js for Wedges

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/vite.mdx

Update your Tailwind CSS configuration file to include the paths for Wedges styles and add the Wedges Tailwind plugin.

```javascript
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()],
}
```

--------------------------------

### Adding Tailwind CSS Directives - CSS

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/remix.mdx

This snippet provides the standard `@tailwind` directives to be added to a new `./app/tailwind.css` file. These directives tell Tailwind to inject its `base`, `components`, and `utilities` styles into this CSS file, which will then be imported into the application.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

--------------------------------

### Importing RadioGroup Component (TSX)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/radio-group.mdx

Imports the `RadioGroup` component from the `@lemonsqueezy/wedges` library, making it available for use in a React or TSX file. This is the first step before using the component.

```tsx
import { RadioGroup } from "@lemonsqueezy/wedges";
```

--------------------------------

### Importing Switch Component (tsx)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/switch.mdx

Imports the 'Switch' component from the '@lemonsqueezy/wedges' library. This is the required first step before using the component in your React application.

```tsx
import { Switch } from "@lemonsqueezy/wedges";
```

--------------------------------

### Importing Toggle Component (TSX)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/toggle.mdx

Imports the Toggle component from the `@lemonsqueezy/wedges` library. This step is required before using the component in your application.

```tsx
import { Toggle } from "@lemonsqueezy/wedges";
```

--------------------------------

### Rendering Basic React Button (TSX)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/button.mdx

Demonstrates the basic usage of the Button component, rendering a simple button with default properties and 'Button' as its text content.

```tsx
<Button>Button< consideration/Button>

```

--------------------------------

### Basic Popover Usage (TSX)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/popover.mdx

This demonstrates the fundamental structure for using the Popover component. It wraps the Popover.Trigger (the element that activates the popover) and the Popover.Content (the panel displayed) within the main Popover component.

```tsx
<Popover>\n  <Popover.Trigger>Trigger</Popover.Trigger>\n  <Popover.Content>Content</Popover.Content>\n</Popover>
```

--------------------------------

### Importing Textarea Component - Wedges TSX

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/textarea.mdx

This snippet shows how to import the `Textarea` component from the `@lemonsqueezy/wedges` library. It is the standard way to make the component available for use in a React/TSX file and is a prerequisite for using it in your application.

```tsx
import { Textarea } from "@lemonsqueezy/wedges";
```

--------------------------------

### Importing Tailwind CSS in root.tsx - TSX

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/remix.mdx

This snippet shows how to import the generated `./app/tailwind.css` file into your Remix application's root component (`./app/root.jsx` or `./app/root.tsx`). By adding it to the `links` function, Remix ensures the CSS is loaded for your application.

```tsx
import stylesheet from "~/tailwind.css";

export const links: LinksFunction = () => [{ rel: "stylesheet", href: stylesheet }];
```

--------------------------------

### Importing React Button Component (TSX)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/button.mdx

Imports the Button component from the `@lemonsqueezy/wedges` UI library. This is the first step to use the component in a React/TypeScript application.

```tsx
import { Button } from "@lemonsqueezy/wedges";
```

--------------------------------

### Importing DropdownMenu component - TSX

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/dropdown-menu.mdx

This snippet shows how to import the `DropdownMenu` component from the `@lemonsqueezy/wedges` library for use in a TSX/React application. This is the first step required before using the component.

```tsx
import { DropdDown } from "@lemonsqueezy/wedges";
```

--------------------------------

### Configure pnpm Hoisting for Wedges (Optional)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/astro.mdx

If using pnpm, add this line to your `.npmrc` file. This configuration helps pnpm handle the dependency structure of Wedges correctly, ensuring components function as expected.

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

--------------------------------

### Basic Tag Usage - TSX

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/tag.mdx

Demonstrates the most basic usage of the Tag component. It renders a simple tag with the text "Tag" inside. This requires the Tag component to be imported first.

```TSX
<Tag>Tag<\/Tag>
```

--------------------------------

### Cleaning Project Artifacts (PNPM) - Shell

Source: https://github.com/lmsqueezy/wedges/blob/main/CONTRIBUTING.md

Runs the script to remove common build artifacts and temporary directories from the project. This typically includes deleting `dist`, `node_modules`, and other caches or build-related folders to ensure a clean state. Useful for resolving build issues or freeing up disk space. Requires PNPM.

```Shell
pnpm clean
```

--------------------------------

### Configuring Tailwind CSS for Wedges - TSX

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/installation/remix.mdx

This snippet demonstrates how to modify the `tailwind.config.ts` file to include the necessary configuration for Wedges. It adds the Wedges plugin (`wedgesTW`) and extends the `content` array to include the paths where Wedges components are located, ensuring Tailwind can process their classes.

```tsx
import { wedgesTW } from "@lemonsqueezy/wedges";
import type { Config } from "tailwindcss";

export default {
  content: [
    "./app/**/*.{js,jsx,ts,tsx}",
    "node_modules/@lemonsqueezy/wedges/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [wedgesTW()],
} satisfies Config;
```

--------------------------------

### Importing Badge Component (TSX/React)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/badge.mdx

Imports the `Badge` component from the `@lemonsqueezy/wedges` library for use in a React/TypeScript application. This is the first step before using the component in your code.

```tsx
import { Badge } from "@lemonsqueezy/wedges";
```

--------------------------------

### Importing ButtonGroup Component (TSX)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/button-group.mdx

Imports the ButtonGroup component from the @lemonsqueezy/wedges library, making it available for use in the current file.

```tsx
import { ButtonGroup } from "@lemonsqueezy/wedges";
```

--------------------------------

### Importing Popover Component (TSX)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/popover.mdx

This snippet shows how to import the Popover component from the @lemonsqueezy/wedges library. This is the necessary first step before using the component in a React or TSX application.

```tsx
import { Popover } from "@lemonsqueezy/wedges";
```

--------------------------------

### Rendering Basic Textarea - Wedges TSX

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/textarea.mdx

This snippet demonstrates the basic usage of the `Textarea` component in a React/TSX application. By simply including `<Textarea />`, you render a default, interactive multi-line text input field without any specific properties set.

```tsx
<Textarea />
```

--------------------------------

### Rendering Basic Alert Component - React/TSX

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/alert.mdx

This snippet demonstrates the basic usage of the Alert component in TSX/JSX. It includes a title via the `title` prop and provides the main content as children.

```tsx
<Alert title="Alert title">Alert content</Alert>
```

--------------------------------

### Importing Tooltip Component in TSX

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/tooltip.mdx

Imports the main Tooltip component from the @lemonsqueezy/wedges library for use in React/TSX applications. This is the necessary first step before utilizing any of the Tooltip component's features.

```tsx
import { Tooltip } from "@lemonsqueezy/wedges";
```

--------------------------------

### Composing Wedges Slider with Primitives (TSX)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/slider.mdx

Demonstrates building a slider using the compositional primitives: `Slider.Root`, `Slider.Track`, `Slider.Range`, and `Slider.Thumb`. This approach allows for greater customization while inheriting Radix accessibility and base styles. It requires nesting the track, range, and thumb components within the root.

```tsx
<Slider.Root>
    <Slider.Track>
        <Slider.Range />
    </Slider.Track>
    <Slider.Thumb />
</Slider.Root>
```

--------------------------------

### Importing Alert Component - React/TSX

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/alert.mdx

This snippet shows the necessary import statement to use the Alert component in a React or TSX file. It imports the component directly from the `@lemonsqueezy/wedges` package.

```tsx
import { Alert } from "@lemonsqueezy/wedges";
```

--------------------------------

### Configuring Wedges Tailwind Plugin in TSX

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/theming/tailwind-css-plugin.mdx

This snippet demonstrates the basic integration of the `@lemonsqueezy/wedges/tailwind` plugin into a `tailwind.config.ts` file. It shows how to import the plugin and add the necessary content path (`node_modules/@lemonsqueezy/wedges/dist/**/*.{js,ts,jsx,tsx}`) to ensure Wedges components are included in the build process.

```TSX
import { wedgesTW } from "@lemonsqueezy/wedges";
import type { Config } from "tailwindcss";

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

export default config;
```

--------------------------------

### Importing SwitchGroup Component - TSX

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/switch-group.mdx

This snippet shows the standard way to import the SwitchGroup component from the @lemonsqueezy/wedges package into a TSX or React file, making it available for use in your application.

```tsx
import { SwitchGroup } from "@lemonsqueezy/wedges";
```

--------------------------------

### Rendering Basic Avatar with Image (TSX)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/avatar.mdx

Shows the basic usage of the Avatar component, rendering an image specified by the `src` prop and providing alternative text via the `alt` prop. This is the most common way to display a user's avatar.

```tsx
<Avatar
  alt="Image alt text"
  src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=250&h=250&auto=format&fit=crop"
/>
```

--------------------------------

### Basic ButtonGroup Usage (TSX)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/button-group.mdx

Demonstrates the fundamental structure of the ButtonGroup component, wrapping multiple ButtonGroup.Item components. Each item represents an individual button within the grouped context.

```tsx
<ButtonGroup>
  <ButtonGroup.Item>Button</ButtonGroup.Item>
  <ButtonGroup.Item>Button</ButtonGroup.Item>
</ButtonGroup>
```

--------------------------------

### Rendering ProgressCircle Component (TSX)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/progress-circle.mdx

Renders the ProgressCircle component with a value prop set to 50. This demonstrates a basic usage of the component, showing 50% completion. It requires the component to be imported first.

```tsx
<ProgressCircle value={50} />
```

--------------------------------

### Configuring Wedges Tailwind Plugin Options in TSX

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/theming/tailwind-css-plugin.mdx

This snippet expands on the basic configuration by showing how to pass a configuration object to the `wedgesTW()` function. It illustrates common options like setting a custom CSS variable prefix (`prefix`), defining default themes (`defaultTheme`), specifying which theme to extend for new themes (`defaultExtendTheme`), specifying font smoothing (`fontSmooth`), and defining custom themes within the `themes` object.

```TSX
import { wedgesTW } from "@lemonsqueezy/wedges";
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    // ...
    "node_modules/@lemonsqueezy/wedges/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {},
  darkMode: "class",
  plugins: [
    wedgesTW({
      prefix: "wg", // prefix used for CSS variables
      defaultTheme: "light", // default theme
      defaultExtendTheme: "light", // default theme to extend when creating custom themes
      fontSmooth: "antialiased", // specify font smoothing for Wedges components
      themes: {
        light: {
          colors: {}, // light themable colors
        },
        dark: {
          colors: {}, // dark themable colors
        },
        // ... custom themes
      },
    }),
  ],
};
```

--------------------------------

### Defining KbdKey Type - TypeScript

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/kbd.mdx

Provides the TypeScript type definition for the `KbdKey` prop used by the `Kbd` component. It lists all the valid string literal values that can be passed to the `keys` prop, representing various common keyboard keys.

```typescript
type KbdKey =
  | "command"
  | "shift"
  | "ctrl"
  | "option"
  | "enter"
  | "delete"
  | "escape"
  | "tab"
  | "capslock"
  | "up"
  | "right"
  | "down"
  | "left"
  | "pageup"
  | "pagedown"
  | "home"
  | "end"
  | "help"
  | "space";
```

--------------------------------

### Importing Label Component (Wedges React TSX)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/label.mdx

Imports the `Label` component from the `@lemonsqueezy/wedges` package, making it available for use in a React/TSX file. This is a prerequisite for rendering the component.

```tsx
import { Label } from "@lemonsqueezy/wedges";
```

--------------------------------

### Importing ProgressCircle Component (TSX)

Source: https://github.com/lmsqueezy/wedges/blob/main/apps/docs/public/docs/components/progress-circle.mdx

Imports the ProgressCircle component from the @lemonsqueezy/wedges library. This is the necessary step to use the component in a React/TypeScript application.

```tsx
import { ProgressCircle } from "@lemonsqueezy/wedges";
```