Divider

Horizontal rule with multiple visual styles from subtle to glowing.

Components

Divider

content

static

<arc-divider>

Overview

Divider provides a horizontal rule that separates content sections with visual clarity. Unlike a plain `<hr>`, it ships with nine variants in two families, and which family you want is the first decision. **The illuminated set** is what Divider has always drawn, designed for dark-themed interfaces. The default `subtle` uses a gradient that fades at both edges; `glow` adds an animated shimmer using a violet-accented overlay with `mix-blend-mode: screen`. The line variants — `line-white`, `line-primary`, and `line-gradient` — render a centered 2px rule with a constrained max-width (160px, 200px, and 240px respectively), making them ideal for decorative section breaks in hero areas or between card groups. `line-primary` and `line-gradient` include a box-shadow glow for added depth against dark backgrounds. **The plain set arrived with `arc-separator` in v4**, which merged in here. Before that this component drew the token gradient and nothing else — there was no dashed or dotted rule at any width, which is why the two components coexisted. `dashed` and `dotted` are the ordinary rules those names describe. `line` is a flat single-color rule with no fade at all. `fade` is a flat edge-to-edge fade, and it is worth separating from `subtle` since they read as the same idea: `subtle` is the token gradient, `fade` is the flat one. Migrating from Separator, the variants carry over unchanged and `orientation="vertical"` becomes the `vertical` flag — see [the tombstone](/docs/components/separator). Any variant can run vertically with the `vertical` flag, which switches the host to `inline-flex` and rotates the gradient to run top-to-bottom — use it inside a flex row to separate inline content. `label` puts text in the middle of a horizontal divider, splitting it into two lines, which is the `OR` between two form options. `align` shifts a gradient's origin so it fades from one edge instead of both. Divider renders a single `<div>` with `role="separator"` for proper accessibility semantics. The glow variant's shimmer animation runs over a 6-second cycle and automatically disables when the user has `prefers-reduced-motion` enabled, ensuring an inclusive experience without sacrificing visual impact.

Guidelines

When to use

Use the `subtle` variant as a general-purpose content separator between sections
Use `dashed` or `dotted` where the rule marks a boundary rather than decorating one — drop zones, optional sections, cut lines
Use `line` when you want a plain flat rule and nothing else; it is the closest thing here to a bare `<hr>`
Use `line-gradient` or `line-primary` as decorative breaks in hero and feature sections
Place `glow` dividers sparingly to draw attention to major section transitions
Combine with arc-section or arc-container to define clear visual boundaries

When not to use

Do not stack multiple glow dividers close together — the shimmer effect becomes distracting
Do not use the centered line variants for dense UI layouts; their constrained max-width leaves dead space
Do not reach for `subtle` when you meant `fade` — `subtle` is the token gradient and picks up theme accents, `fade` is a flat neutral
Do not rely solely on the divider for semantic separation; use proper heading structure too
Do not override the animation timing without testing prefers-reduced-motion behavior

Features

Five illuminated variants: `subtle`, `glow`, `line-white`, `line-primary`, and `line-gradient`
Four plain rule variants absorbed from `arc-separator`: `dashed`, `dotted`, `fade`, and `line`
Animated shimmer on the `glow` variant using a 6-second CSS keyframe cycle
Centered decorative line variants with constrained max-width for elegant section breaks
Box-shadow glow on `line-primary` and `line-gradient` for depth on dark backgrounds
`vertical` renders any variant as a top-to-bottom rule for use inside flex rows
`label` splits a horizontal divider around centered text — the `OR` between two options
`align` shifts a gradient to fade from one edge instead of both
Built-in `prefers-reduced-motion` support that disables the shimmer animation
Semantic `role="separator"` for assistive technology
Exposed `divider` CSS part for external style customization

Preview

Left

Right

Usage

<arc-divider></arc-divider>
<arc-divider variant="glow"></arc-divider>
<arc-divider variant="line-gradient"></arc-divider>

<!-- The plain rules, absorbed from arc-separator -->
<arc-divider variant="dashed"></arc-divider>
<arc-divider variant="dotted"></arc-divider>
<arc-divider variant="fade"></arc-divider>
<arc-divider variant="line"></arc-divider>

<!-- Labeled divider -->
<arc-divider label="OR"></arc-divider>

<!-- Left-aligned gradient -->
<arc-divider variant="glow" align="left"></arc-divider>

<!-- Vertical divider between inline elements -->
<div style="display: flex; align-items: center; gap: 16px; height: 40px;">
  <span>Section A</span>
  <arc-divider vertical variant="line-primary"></arc-divider>
  <span>Section B</span>
</div>

import { Divider } from '@arclux/arc-ui-react';

export default function Example() {
  return (
    <>
      <Divider />
      <Divider variant="glow" />
      <Divider variant="line-gradient" />

      {/* Labeled */}
      <Divider label="OR" />

      {/* Left-aligned */}
      <Divider variant="glow" align="left" />

      {/* Vertical */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 16, height: 40 }}>
        <span>Section A</span>
        <Divider vertical variant="line-primary" />
        <span>Section B</span>
      </div>
    </>
  );
}

<script setup>
import { Divider } from '@arclux/arc-ui-vue';
</script>

<template>
  <Divider />
  <Divider variant="glow" />
  <Divider variant="line-gradient" />
</template>

<script>
  import { Divider } from '@arclux/arc-ui-svelte';
</script>

<Divider />
<Divider variant="glow" />
<Divider variant="line-gradient" />

import { Component } from '@angular/core';
import { Divider } from '@arclux/arc-ui-angular';

@Component({
  imports: [Divider],
  template: `
    <arc-divider></arc-divider>
    <arc-divider variant="glow"></arc-divider>
    <arc-divider variant="line-gradient"></arc-divider>
  `,
})
export class MyComponent {}

import { Divider } from '@arclux/arc-ui-solid';

export default function Example() {
  return (
    <>
      <Divider />
      <Divider variant="glow" />
      <Divider variant="line-gradient" />
    </>
  );
}

import { Divider } from '@arclux/arc-ui-preact';

export default function Example() {
  return (
    <>
      <Divider />
      <Divider variant="glow" />
      <Divider variant="line-gradient" />
    </>
  );
}

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-divider — requires divider.css + base.css (or arc-ui.css) -->
<div class="arc-divider">
  <div class="divider" role="separator"></div>
</div>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-divider — self-contained, no external CSS needed -->
<style>
  @media (prefers-reduced-motion: reduce) {
    .arc-divider[data-variant="glow"] .divider::after { animation: none; }
  }
</style>
<div class="arc-divider" style="display: block; width: 100%">
  <div class="divider" style="width: 100%; height: 1px" role="separator"></div>
</div>

API

label string ='': Text displayed in the center of the divider, splitting it into two lines. Common use: 'OR' between form options. Only applies to horizontal dividers.
variant 'subtle' | 'glow' | 'line-white' | 'line-primary' | 'line-gradient' | 'dashed' | 'dotted' | 'fade' | 'line' ='subtle': Visual style. subtle, glow and the three line-* styles are the illuminated set. dashed, dotted and fade are the plain rule styles absorbed from arc-separator when it was merged here, along with line, its flat single-color rule. fade is the flat edge-to-edge fade, as distinct from subtle, which is the token gradient; line is the flat rule with no fade at all.
align '' | 'left' | 'right' ='': Shifts the gradient origin so it fades from one edge instead of both. Empty (the default) fades from both edges. Useful for asymmetric layouts where the divider should visually connect to content on one side.
vertical boolean =false: Renders the divider as a vertical line. Switches to inline-flex display and rotates gradient directions to run top-to-bottom. Use inside flex rows to separate inline content.

Divider

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

Docs

Project

Arclight