Content blocks

Divider

The divider block: a 1px hairline in a 13px row. Created by typing `---`.

Above the divider
Below the divider

Usage

  • Use Divider to separate groups of content within a page when a heading would be too heavy.
  • Don’t stack dividers or use them between every block; spacing and headings usually suffice.
  • Don’t use the Divider block in app chrome; use the Divider atom instead.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/DividerExample.tsx
import { BlockContent, DividerBlock, TextBlock, rt } from '@krackedui/motion';

export function DividerExample() {
  return (
    <BlockContent>
      <TextBlock text={rt('Above the divider')} />
      <DividerBlock />
      <TextBlock text={rt('Below the divider')} />
    </BlockContent>
  );
}

API Reference

DividerBlock

Based on <div> and supports all of its props. No extra props.

PropTypeDefault
className
string

Accessibility

  • The line has role="separator".
  • The block is not editable (contentEditable={false}); in the editor, Backspace from the next block removes it.
© 2026 Motion. Internal documentation.