Divider

A horizontal or vertical separator line using role="separator". Supports an optional centered text label for section delineation.

Import

tsx

import { Divider } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

Preview

Above the divider

Below the divider

Left

Right

Props

Prop	Type	Default	Description
orientation	`'horizontal' \| 'vertical'`	`'horizontal'`	Direction of the separator line.
label	`string`	—	Optional centered text that splits the line.

Examples

Basic

tsx

import { Divider } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
      <p>Above the divider</p>
      <Divider />
      <p>Below the divider</p>
    </div>
  )
}

With label

tsx

import { Divider } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
      <p>Section one</p>
      <Divider label="or" />
      <p>Section two</p>
    </div>
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

css

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */