---
title: Next.js
description: Usando o EloquentUI no Next.JS.
breadcrumbs:
  - Installation
---

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.

<Steps>

#### Installation

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

<Tabs variant='underlined' defaultValue='pnpm'>
    <TabsList>
        <TabsTrigger value="pnpm">pnpm</TabsTrigger>
        <TabsTrigger value="npm">npm</TabsTrigger>
        <TabsTrigger value="yarn">yarn</TabsTrigger>
    </TabsList>

    <TabsContent value="pnpm">
        ```bash
        pnpm create next-app -e https://github.com/lmsqueezy/wedges-next-app-template
        ```
    </TabsContent>

    <TabsContent value="npm">
        ```bash
        npx create-next-app -e https://github.com/lmsqueezy/wedges-next-app-template
        ```
    </TabsContent>

    <TabsContent value="yarn">
        ```bash
        yarn create next-app -e https://github.com/lmsqueezy/wedges-next-app-template
        ```
    </TabsContent>
</Tabs>

You will then be asked the following prompt:

```txt showLineNumbers
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:

```bash /my-app/
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:

<Tabs variant='underlined' defaultValue='pnpm'>
    <TabsList>
        <TabsTrigger value="pnpm">pnpm</TabsTrigger>
        <TabsTrigger value="npm">npm</TabsTrigger>
        <TabsTrigger value="yarn">yarn</TabsTrigger>
    </TabsList>

    <TabsContent value="pnpm">
        ```bash
        pnpm dev
        ```
    </TabsContent>

    <TabsContent value="npm">
        ```bash
        npm run dev
        ```
    </TabsContent>

    <TabsContent value="yarn">
        ```bash
        yarn dev
        ```
    </TabsContent>
</Tabs>

#### Using the components

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

```tsx {1,4} showLineNumbers
import { Alert } from "@lemonsqueezy/wedges";

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

### Manual Installation

<Steps>

#### Install Wedges

<Tabs variant='underlined' defaultValue='pnpm'>
    <TabsList>
        <TabsTrigger value="pnpm">pnpm</TabsTrigger>
        <TabsTrigger value="npm">npm</TabsTrigger>
        <TabsTrigger value="yarn">yarn</TabsTrigger>
    </TabsList>

    <TabsContent value="pnpm">
        ```bash
        pnpm add @lemonsqueezy/wedges
        ```
    </TabsContent>

    <TabsContent value="npm">
        ```bash
        npm i @lemonsqueezy/wedges
        ```
    </TabsContent>

    <TabsContent value="yarn">
        ```bash
        yarn add @lemonsqueezy/wedges
        ```
    </TabsContent>
</Tabs>

#### 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 <a href="https://tailwindcss.com/docs/installation/" target="_blank" rel='nofollow noreferrer'>official Tailwind CSS installation guide</a>.

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

```tsx {2,7,10,11} title="tailwind.config.ts" showLineNumbers
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.

```tsx {1,4} showLineNumbers
import { Alert } from "@lemonsqueezy/wedges";

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

</Steps>