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

# Laravel

Install and configure Tiptap UI Components in your Laravel project.

Use the command below to scaffold a new Laravel project with React support:

```bash
laravel new my-app --react
```

## 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 React from 'react'
import { HeadingButton } from '@/components/ui/heading-button'

export default function EditorPage() {
  // Tiptap setup...

  return (
    <div className="editor-page">
      <div className="toolbar">
        <HeadingButton level={1}>Heading 1</HeadingButton>
        <HeadingButton level={2}>Heading 2</HeadingButton>
        <HeadingButton level={3}>Heading 3</HeadingButton>
      </div>
      {/* Your editor component */}
    </div>
  )
}
```

## 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:

- `resources/css/app.css`

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

**File:** `resources/css/app.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).