Next.js

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

npx @tiptap/cli@latest init

Choose between a Next.js project or a Monorepo.

When prompted with:

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.

Add Tiptap components

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

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:

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

Import the global SCSS styles in the main stylesheet:

File: src/index.css

@import './styles/_variables.scss';
@import './styles/_keyframe-animations.scss';

Learn more about configuring styles in the style setup guide.