Components

Divider

Hairline separator, horizontal or vertical. `block` adds the spacing of a divider in a document.

Usage

Use it to:

  • separate groups in menus, toolbars and documents

Don’t use it to:

  • adding space between items (use Stack gap)
  • framing a section (use a Card or border)

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 { Divider } from '@krackedui/motion';

export function DividerDemo() {
  return (
    <Divider />
  );
}

Examples

Divider block

Above the divider.

Below the divider.

Vertical

SharePublish

Dark theme

API Reference

Divider

A <div role="separator">; supports all of its props. Adds:

PropTypeDefault
orientation
"horizontal""vertical"
"horizontal"
block
boolean
false

Accessibility

  • role="separator" with aria-orientation; not focusable. Purely visual spacing does not need a Divider: use Stack gaps.
© 2026 Motion. Internal documentation.