Divider

Visual separator line. Renders as <hr>. Supports horizontal/vertical orientation and variant colors.

Import

import { Divider } from 'reablocks';

Divider Props

Basic Usage

<Divider />

Vertical

<div className="flex h-16 items-center gap-4">
  <span>Left</span>
  <Divider orientation="vertical" />
  <span>Right</span>
</div>

Variants

<Divider variant="primary" />   {/* Solid bg-surface */}
<Divider variant="secondary" /> {/* Gradient via-blue-500 */}

DividerTheme Interface

interface DividerTheme {
  base: string;           // Base (border-none)
  orientation: {
    horizontal: string;   // h-px, w-full, my-2.5
    vertical: string;     // w-px, h-full, mx-2.5
  };
  variant: {
    primary: string;      // Solid color
    secondary: string;    // Gradient
  };
  disableMargins: string; // No margins
}