---
title: "Next.js"
description: "Install and configure Tiptap UI Components in your Next.js project."
canonical_url: "https://tiptap.dev/docs/ui-components/install/next"
---

# Next.js

Install and configure Tiptap UI Components in your Next.js project.

Run the `init` command to create a new Next.js project or to setup an existing one:

```bash
npx @tiptap/cli@latest init
```

Choose between a `Next.js` project or a `Monorepo`.

When prompted with:

```bash
Would you like to add a template or UI components to your project?
```

Select **UI Components** if you want to include reusable Tiptap UI components.
Alternatively, select **Template** to scaffold a full example project.

> **Only add styles:**
>
> If you added a template or UI components during setup, you can skip this section and proceed
> directly to **Add Styles**.

> **A new project still shows the default Next.js page:**
>
> `init` scaffolds a standard Next.js app and copies the components you chose into your
> `components/` folder as source — but it does **not** modify `app/page.tsx`. Until you render a
> Tiptap component there yourself, `npm run dev` shows Next.js's default starter page. This is
> expected, not a broken install.

## Render the editor

Open `app/page.tsx` and render the template or component you installed. For example, if you added the **Simple Editor** template during `init`:

```tsx
import { SimpleEditor } from '@/components/tiptap-templates/simple/simple-editor'

export default function Page() {
  return <SimpleEditor />
}
```

Start the dev server and open the page to see your editor:

```bash
npm run dev
```

## Add Tiptap components

Install Tiptap UI components using the CLI. For example, to add the `HeadingButton` component:

```bash
npx @tiptap/cli@latest add heading-button
```

The command above will install the `HeadingButton` component and its dependencies. You can then import and use it in your **Tiptap** project:

```tsx
import { HeadingButton } from '@/components/ui/heading-button'

export default function App() {
  // Tiptap ...

  return (
    <>
      <HeadingButton level={1}>Heading 1</HeadingButton>
      <HeadingButton level={2}>Heading 2</HeadingButton>
      <HeadingButton level={3}>Heading 3</HeadingButton>
    </>
  )
}
```

## Add Styles

> **Styles are added automatically:**
>
> When you install your first Tiptap UI Component, the CLI automatically adds the required
> .scss imports to your main stylesheet. In most cases, **no manual setup is needed**.

Before proceeding, ensure your project includes a CSS reset.
If you are using Tailwind CSS, you already have one.

#### Where styles are imported

The CLI automatically injects style imports into your global stylesheet, such as:

- `app/globals.css`
- `src/app/globals.css`

If you’ve customized your entry file, make sure this is present:

**File:** `app/globals.css` or `src/app/globals.css` (depending on your project)

```css
@import '<path-to-styles>/_variables.scss';
@import '<path-to-styles>/_keyframe-animations.scss';
```

Learn more about configuring styles in the [style setup guide](https://tiptap.dev/docs/ui-components/getting-started/style.md).