PaperSeparator

Editorial divider with solid, dashed, double, and labeled styles.

← dividers are typography too.

Preview

Components

import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const separatorVariants = cva('w-full shrink-0 border-0', {
  variants: {

Installation

Copy this file into your project, export its barrel, and then add it to the master UI index.

Step 1.Create this file:
components/ui/paperSeparator/paperSeparator.tsx⎘
Step 2.Create the barrel:
components/ui/paperSeparator/index.ts⎘
Step 3.Add this export in components/ui/index.ts:
```
export * from './paperSeparator'
```

Variants

Solid

Dashed

Editorial

Labeled

Props

Prop	Type	Default	Description
`variant`	`'solid' \| 'double' \| 'dashed' \| 'thick' \| 'editorial'`	`solid`	Visual line style.
`label`	`string`	`undefined`	Centers text between divider lines.

Examples

Section split

Use as rhythm marker between large content blocks.

<PaperSeparator variant="thick" />

Labeled chapter

Adds quick scan points for long docs pages.

API

<PaperSeparator label="API" />