Add a spacer UI component into Tiptap

A flexible space component used for layout spacing.

Install

You can add the primitive via Tiptap CLI (for Vite or Next.js)

npx @tiptap/cli add spacer

Manual Integration

For frameworks other than Vite or Next.js, add the primitive manually from the open-source repository.

Import styles

This component requires you to import our styles which were added to styles/keyframe-animation.scss and styles/_variables.scss.

Usage

import { Spacer } from '@/components/tiptap-ui-primitive/spacer'

export default function MyComponent() {
  return (
    <div className="toolbar">
      <button>Left Button</button>
      <Spacer />
      <button>Right Button</button>
    </div>
  )
}