Divider

Experimental Alpha

This library is a work-in-progress. We are releasing it early to gather feedback, but it is not ready for production.

Divider components visually separate content in your application. They support both horizontal and vertical orientations, optional text or icon content, and can be customized with different sizes and color variants.

Examples

Vue

Lit

React

Live Preview

Horizontal Dividers

Content above the divider

Content below the divider

Horizontal with Content

Centered (default)

Justify Start

Justify End

Vertical Dividers

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Yes

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Sir!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Sizes - Horizontal

Small

Default

Large

XLarge

Sizes - Vertical

Content

Def

Content

Variants

Default

Success

Info

Warning

Error

Monochrome

CSS Shadow Parts Customization

Use CSS Shadow Parts to customize the divider's appearance without affecting the component's internal styling.

Dotted Pattern

Custom vertical gradient divider on the right

Custom

Styled with CSS Shadow Parts

View Vue Code

<template>
  <section>
    <div class="mbe4">
      <h2>Horizontal Dividers</h2>
    </div>
    <div class="mbe4">
      <p>Content above the divider</p>
      <VueDivider />
      <p>Content below the divider</p>
    </div>

    <div class="mbe4">
      <h2>Horizontal with Content</h2>
    </div>
    <div class="mbe4">
      <VueDivider>Centered (default)</VueDivider>
      <div class="mbe2"></div>
      <VueDivider justify="start">Justify Start</VueDivider>
      <div class="mbe2"></div>
      <VueDivider justify="end">Justify End</VueDivider>
    </div>

    <div class="mbe4">
      <h2>Vertical Dividers</h2>
    </div>
    <div
      class="mbe4"
      style="display: flex; min-height: 200px;"
    >
      <p style="flex: 1;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <VueDivider vertical>Yes</VueDivider>
      <p style="flex: 1;">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
      <VueDivider vertical>Sir!</VueDivider>
      <p style="flex: 1;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>

    <div class="mbe4">
      <h2>Sizes - Horizontal</h2>
    </div>
    <div class="mbe4">
      <VueDivider size="small">Small</VueDivider>
      <div class="mbe2"></div>
      <VueDivider size="default">Default</VueDivider>
      <div class="mbe2"></div>
      <VueDivider size="large">Large</VueDivider>
      <div class="mbe2"></div>
      <VueDivider size="xlarge">XLarge</VueDivider>
    </div>

    <div class="mbe4">
      <h2>Sizes - Vertical</h2>
    </div>
    <div
      class="mbe4"
      style="display: flex; gap: 1rem; min-height: 150px;"
    >
      <p style="flex: 1;">Content</p>
      <VueDivider
        vertical
        size="small"
      >Sm</VueDivider>
      <p style="flex: 1;">Content</p>
      <VueDivider
        vertical
        size="default"
      >Def</VueDivider>
      <p style="flex: 1;">Content</p>
      <VueDivider
        vertical
        size="large"
      >Lg</VueDivider>
      <p style="flex: 1;">Content</p>
      <VueDivider
        vertical
        size="xlarge"
      >XL</VueDivider>
      <p style="flex: 1;">Content</p>
    </div>

    <div class="mbe4">
      <h2>Variants</h2>
    </div>
    <div class="mbe4">
      <VueDivider variant="default">Default</VueDivider>
      <div class="mbe2"></div>
      <VueDivider variant="success">Success</VueDivider>
      <div class="mbe2"></div>
      <VueDivider variant="info">Info</VueDivider>
      <div class="mbe2"></div>
      <VueDivider variant="warning">Warning</VueDivider>
      <div class="mbe2"></div>
      <VueDivider variant="error">Error</VueDivider>
      <div class="mbe2"></div>
      <VueDivider variant="monochrome">Monochrome</VueDivider>
    </div>

    <div class="mbe4">
      <h2>CSS Shadow Parts Customization</h2>
      <p class="mbs2 mbe3">
        Use CSS Shadow Parts to customize the divider's appearance without affecting the component's internal styling.
      </p>
    </div>
    <div class="mbe4">
      <VueDivider class="custom-divider-dotted">Dotted Pattern</VueDivider>
      <div class="mbe4"></div>
      <div style="display: flex; min-height: 150px;">
        <p style="flex: 1;">Custom vertical gradient divider on the right</p>
        <VueDivider
          class="custom-divider-vertical"
          vertical
        >Custom</VueDivider>
        <p style="flex: 1;">Styled with CSS Shadow Parts</p>
      </div>
    </div>
  </section>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { VueDivider } from "agnosticui-core/divider/vue";

export default defineComponent({
  name: "DividerExamples",
  components: {
    VueDivider,
  },
});
</script>

<style>
.custom-divider-dotted::part(ag-divider)::before,
.custom-divider-dotted::part(ag-divider)::after {
  background: repeating-linear-gradient(
    90deg,
    #10b981 0,
    #10b981 10px,
    transparent 10px,
    transparent 20px
  );
  height: 3px;
}

.custom-divider-vertical::part(ag-divider)::before,
.custom-divider-vertical::part(ag-divider)::after {
  background: linear-gradient(180deg, #ef4444 0%, #fbbf24 100%);
  width: var(--ag-space-1);
}

.custom-divider-vertical::part(ag-divider-content) {
  font-family: "Courier New", monospace;
  letter-spacing: 2px;
  font-weight: 700;
}
</style>

Live Preview

View Lit / Web Component Code

import { LitElement, html } from 'lit';
import 'agnosticui-core/divider';

export class DividerLitExamples extends LitElement {
  // Render in light DOM to access global utility classes
  createRenderRoot() {
    return this;
  }

  render() {
    return html`
      <style>
        .custom-divider-dotted::part(ag-divider)::before,
        .custom-divider-dotted::part(ag-divider)::after {
          background: repeating-linear-gradient(
            90deg,
            #10b981 0,
            #10b981 10px,
            transparent 10px,
            transparent 20px
          );
          height: 3px;
        }

        .custom-divider-vertical::part(ag-divider)::before,
        .custom-divider-vertical::part(ag-divider)::after {
          background: linear-gradient(180deg, #ef4444 0%, #fbbf24 100%);
          width: var(--ag-space-1);
        }

        .custom-divider-vertical::part(ag-divider-content) {
          font-family: "Courier New", monospace;
          letter-spacing: 2px;
          font-weight: 700;
        }
      </style>

      <section>
        <!-- Horizontal Dividers -->
        <div class="mbe4">
          <h2>Horizontal Dividers</h2>
        </div>
        <div class="mbe4">
          <p>Content above the divider</p>
          <ag-divider></ag-divider>
          <p>Content below the divider</p>
        </div>

        <!-- Horizontal with Content -->
        <div class="mbe4">
          <h2>Horizontal with Content</h2>
        </div>
        <div class="mbe4">
          <ag-divider>Centered (default)</ag-divider>
          <div class="mbe2"></div>
          <ag-divider justify="start">Justify Start</ag-divider>
          <div class="mbe2"></div>
          <ag-divider justify="end">Justify End</ag-divider>
        </div>

        <!-- Vertical Dividers -->
        <div class="mbe4">
          <h2>Vertical Dividers</h2>
        </div>
        <div class="mbe4" style="display: flex; min-height: 200px;">
          <p style="flex: 1;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <ag-divider is-vertical>Yes</ag-divider>
          <p style="flex: 1;">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
          <ag-divider is-vertical>Sir!</ag-divider>
          <p style="flex: 1;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>

        <!-- Sizes - Horizontal -->
        <div class="mbe4">
          <h2>Sizes - Horizontal</h2>
        </div>
        <div class="mbe4">
          <ag-divider size="small">Small</ag-divider>
          <div class="mbe2"></div>
          <ag-divider size="default">Default</ag-divider>
          <div class="mbe2"></div>
          <ag-divider size="large">Large</ag-divider>
          <div class="mbe2"></div>
          <ag-divider size="xlarge">XLarge</ag-divider>
        </div>

        <!-- Sizes - Vertical -->
        <div class="mbe4">
          <h2>Sizes - Vertical</h2>
        </div>
        <div class="mbe4" style="display: flex; gap: 1rem; min-height: 150px;">
          <p style="flex: 1;">Content</p>
          <ag-divider is-vertical size="small">Sm</ag-divider>
          <p style="flex: 1;">Content</p>
          <ag-divider is-vertical size="default">Def</ag-divider>
          <p style="flex: 1;">Content</p>
          <ag-divider is-vertical size="large">Lg</ag-divider>
          <p style="flex: 1;">Content</p>
          <ag-divider is-vertical size="xlarge">XL</ag-divider>
          <p style="flex: 1;">Content</p>
        </div>

        <!-- Variants -->
        <div class="mbe4">
          <h2>Variants</h2>
        </div>
        <div class="mbe4">
          <ag-divider variant="default">Default</ag-divider>
          <div class="mbe2"></div>
          <ag-divider variant="success">Success</ag-divider>
          <div class="mbe2"></div>
          <ag-divider variant="info">Info</ag-divider>
          <div class="mbe2"></div>
          <ag-divider variant="warning">Warning</ag-divider>
          <div class="mbe2"></div>
          <ag-divider variant="error">Error</ag-divider>
          <div class="mbe2"></div>
          <ag-divider variant="monochrome">Monochrome</ag-divider>
        </div>

        <!-- CSS Shadow Parts Customization -->
        <div class="mbe4">
          <h2>CSS Shadow Parts Customization</h2>
          <p class="mbs2 mbe3">
            Use CSS Shadow Parts to customize the divider's appearance without affecting the component's internal styling.
          </p>
        </div>
        <div class="mbe4">
          <ag-divider class="custom-divider-dotted">Dotted Pattern</ag-divider>
          <div class="mbe4"></div>
          <div style="display: flex; min-height: 150px;">
            <p style="flex: 1;">Custom vertical gradient divider on the right</p>
            <ag-divider class="custom-divider-vertical" is-vertical>Custom</ag-divider>
            <p style="flex: 1;">Styled with CSS Shadow Parts</p>
          </div>
        </div>
      </section>
    `;
  }
}

// Register the custom element
customElements.define('divider-lit-examples', DividerLitExamples);

Interactive Preview: Click the "Open in StackBlitz" button below to see this example running live in an interactive playground.

View React Code

import { ReactDivider } from "agnosticui-core/divider/react";

export default function DividerReactExamples() {
  return (
    <section>
      {/* Horizontal Dividers */}
      <div className="mbe4">
        <h2>Horizontal Dividers</h2>
      </div>
      <div className="mbe4">
        <p>Content above the divider</p>
        <ReactDivider />
        <p>Content below the divider</p>
      </div>

      {/* Horizontal with Content */}
      <div className="mbe4">
        <h2>Horizontal with Content</h2>
      </div>
      <div className="mbe4">
        <ReactDivider>Centered (default)</ReactDivider>
        <div className="mbe2"></div>
        <ReactDivider justify="start">Justify Start</ReactDivider>
        <div className="mbe2"></div>
        <ReactDivider justify="end">Justify End</ReactDivider>
      </div>

      {/* Vertical Dividers */}
      <div className="mbe4">
        <h2>Vertical Dividers</h2>
      </div>
      <div className="mbe4" style={{ display: "flex", minHeight: "200px" }}>
        <p style={{ flex: 1 }}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.
        </p>
        <ReactDivider vertical>Yes</ReactDivider>
        <p style={{ flex: 1 }}>
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem
          accusantium doloremque laudantium.
        </p>
        <ReactDivider vertical>Sir!</ReactDivider>
        <p style={{ flex: 1 }}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>

      {/* Sizes - Horizontal */}
      <div className="mbe4">
        <h2>Sizes - Horizontal</h2>
      </div>
      <div className="mbe4">
        <ReactDivider size="small">Small</ReactDivider>
        <div className="mbe2"></div>
        <ReactDivider size="default">Default</ReactDivider>
        <div className="mbe2"></div>
        <ReactDivider size="large">Large</ReactDivider>
        <div className="mbe2"></div>
        <ReactDivider size="xlarge">XLarge</ReactDivider>
      </div>

      {/* Sizes - Vertical */}
      <div className="mbe4">
        <h2>Sizes - Vertical</h2>
      </div>
      <div className="mbe4" style={{ display: "flex", gap: "1rem", minHeight: "150px" }}>
        <p style={{ flex: 1 }}>Content</p>
        <ReactDivider vertical size="small">
          Sm
        </ReactDivider>
        <p style={{ flex: 1 }}>Content</p>
        <ReactDivider vertical size="default">
          Def
        </ReactDivider>
        <p style={{ flex: 1 }}>Content</p>
        <ReactDivider vertical size="large">
          Lg
        </ReactDivider>
        <p style={{ flex: 1 }}>Content</p>
        <ReactDivider vertical size="xlarge">
          XL
        </ReactDivider>
        <p style={{ flex: 1 }}>Content</p>
      </div>

      {/* Variants */}
      <div className="mbe4">
        <h2>Variants</h2>
      </div>
      <div className="mbe4">
        <ReactDivider variant="default">Default</ReactDivider>
        <div className="mbe2"></div>
        <ReactDivider variant="success">Success</ReactDivider>
        <div className="mbe2"></div>
        <ReactDivider variant="info">Info</ReactDivider>
        <div className="mbe2"></div>
        <ReactDivider variant="warning">Warning</ReactDivider>
        <div className="mbe2"></div>
        <ReactDivider variant="error">Error</ReactDivider>
        <div className="mbe2"></div>
        <ReactDivider variant="monochrome">Monochrome</ReactDivider>
      </div>

      {/* CSS Shadow Parts Customization */}
      <div className="mbe4">
        <h2>CSS Shadow Parts Customization</h2>
        <p className="mbs2 mbe3">
          Use CSS Shadow Parts to customize the divider's appearance without
          affecting the component's internal styling.
        </p>
      </div>
      <div className="mbe4">
        <ReactDivider className="custom-divider-dotted">Dotted Pattern</ReactDivider>
        <div className="mbe4"></div>
        <div style={{ display: "flex", minHeight: "150px" }}>
          <p style={{ flex: 1 }}>Custom vertical gradient divider on the right</p>
          <ReactDivider className="custom-divider-vertical" vertical>
            Custom
          </ReactDivider>
          <p style={{ flex: 1 }}>Styled with CSS Shadow Parts</p>
        </div>
      </div>
    </section>
  );
}

Open in StackBlitz

Usage

TIP

The framework examples below import AgnosticUI as an npm package. Alternatively, you can use the CLI for complete control, AI/LLM visibility, and full code ownership:

bash

npx ag init --framework FRAMEWORK # react, vue, lit, svelte, etc.
npx ag add Divider

The CLI copies source code directly into your project, giving you full visibility and control. After running npx ag add, you'll receive exact import instructions.

Vue

vue

<template>
  <div>
    <VueDivider />

    <VueDivider>Section Title</VueDivider>

    <VueDivider justify="start">Left aligned</VueDivider>
    <VueDivider justify="end">Right aligned</VueDivider>

    <div style="display: flex;">
      <p>Left content</p>
      <VueDivider vertical />
      <p>Right content</p>
    </div>

    <VueDivider size="large" variant="success">Success</VueDivider>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { VueDivider } from 'agnosticui-core/divider/vue';

export default defineComponent({
  components: { VueDivider }
});
</script>

React

tsx

import { ReactDivider } from 'agnosticui-core/divider/react';

export default function Example() {
  return (
    <div>
      <ReactDivider />

      <ReactDivider>Section Title</ReactDivider>

      <ReactDivider justify="start">Left aligned</ReactDivider>
      <ReactDivider justify="end">Right aligned</ReactDivider>

      <div style={{ display: 'flex' }}>
        <p>Left content</p>
        <ReactDivider vertical />
        <p>Right content</p>
      </div>

      <ReactDivider size="large" variant="success">Success</ReactDivider>
    </div>
  );
}

Lit (Web Components)

html

<script type="module">
  import 'agnosticui-core/divider';
</script>

<ag-divider></ag-divider>

<ag-divider>Section Title</ag-divider>

<ag-divider justify="start">Left aligned</ag-divider>
<ag-divider justify="end">Right aligned</ag-divider>

<div style="display: flex;">
  <p>Left content</p>
  <ag-divider vertical></ag-divider>
  <p>Right content</p>
</div>

<ag-divider size="large" variant="success">Success</ag-divider>

Props

Prop	Type	Default	Description
`vertical`	`boolean`	`false`	Vertical orientation (divides content left/right instead of top/bottom)
`justify`	`'center' \| 'start' \| 'end'`	`'center'`	Content justification (horizontal only). Center places content in middle, start on left, end on right
`size`	`'default' \| 'small' \| 'large' \| 'xlarge'`	`'default'`	Thickness of the divider line
`variant`	`'default' \| 'success' \| 'info' \| 'warning' \| 'error'`	`'default'`	Color variant

Events

The Divider component does not emit any events. It is a presentational component.

CSS Shadow Parts

Part	Description
`ag-divider`	The main divider container element
`ag-divider-content`	The content container (when slotted content is provided)

Customization Example

css

.custom-divider::part(ag-divider)::before,
.custom-divider::part(ag-divider)::after {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  height: 4px;
}

.custom-divider::part(ag-divider-content) {
  color: #667eea;
  font-weight: 700;
  font-size: 1.125rem;
}

.custom-dotted::part(ag-divider)::before,
.custom-dotted::part(ag-divider)::after {
  background: repeating-linear-gradient(
    90deg,
    #10b981 0,
    #10b981 10px,
    transparent 10px,
    transparent 20px
  );
  height: 3px;
}

.custom-vertical::part(ag-divider)::before,
.custom-vertical::part(ag-divider)::after {
  background: linear-gradient(180deg, #ef4444 0%, #fbbf24 100%);
  width: 6px;
}

html

<VueDivider class="custom-divider">Gradient Divider</VueDivider>
<VueDivider class="custom-dotted">Dotted Pattern</VueDivider>
<VueDivider class="custom-vertical" vertical>Vertical</VueDivider>

<ReactDivider className="custom-divider">Gradient Divider</ReactDivider>
<ReactDivider className="custom-dotted">Dotted Pattern</ReactDivider>
<ReactDivider className="custom-vertical" vertical>Vertical</ReactDivider>

<ag-divider class="custom-divider">Gradient Divider</ag-divider>
<ag-divider class="custom-dotted">Dotted Pattern</ag-divider>
<ag-divider class="custom-vertical" vertical>Vertical</ag-divider>

Accessibility

The Divider component is designed to be accessible by default:

Role: Uses role="separator" to indicate its purpose as a visual divider
Orientation: Automatically sets aria-orientation to:
- "horizontal" for horizontal dividers (default)
- "vertical" for vertical dividers (when vertical is true)
Semantics: The separator role is non-interactive and properly indicates content divisions to assistive technologies

Best Practices

Meaningful Separators: Use dividers to create clear visual hierarchy and group related content
Text Content: When adding text to dividers, ensure it meaningfully describes the section it precedes or separates
Don't Overuse: Too many dividers can create visual clutter. Use them strategically
Vertical Dividers: Ensure vertical dividers have adequate height through their parent container's styling

Examples

html

<section>
  <h2>User Profile</h2>
</section>
<ag-divider></ag-divider>
<section>
  <h2>Settings</h2>
</section>

<ag-divider>Account Information</ag-divider>

<div style="display: flex; min-height: 200px;">
  <div>Left panel content</div>
  <ag-divider vertical></ag-divider>
  <div>Right panel content</div>
</div>

Common Patterns

Section Headers

Use dividers with text to create section headers:

html

<ag-divider size="large">Personal Details</ag-divider>
<form>
</form>

Card Separators

Separate items within cards or lists:

html

<div style="padding: 1rem; border: 1px solid #ccc;">
  <div>Item 1</div>
  <ag-divider size="small"></ag-divider>
  <div>Item 2</div>
  <ag-divider size="small"></ag-divider>
  <div>Item 3</div>
</div>

Use vertical dividers in sidebar layouts:

html

<div style="display: flex; min-height: 100vh;">
  <aside style="width: 250px; padding: 1rem;">
  </aside>
  <ag-divider vertical></ag-divider>
  <main style="flex: 1; padding: 1rem;">
  </main>
</div>

Justified Content

Align divider text to create different visual effects:

vue

<template>
  <div>
    <VueDivider justify="start">Beginning</VueDivider>

    <VueDivider>Centered Section</VueDivider>

    <VueDivider justify="end">End</VueDivider>
  </div>
</template>

Divider ​

Examples ​

Horizontal Dividers

Horizontal with Content

Vertical Dividers

Sizes - Horizontal

Sizes - Vertical

Variants

CSS Shadow Parts Customization

Usage ​

Props ​

Events ​

CSS Shadow Parts ​

Customization Example ​

Accessibility ​

Best Practices ​

Examples ​

Common Patterns ​

Section Headers ​

Card Separators ​

Sidebar Layouts ​

Justified Content ​

Divider

Examples

Usage

Props

Events

CSS Shadow Parts

Customization Example

Accessibility

Best Practices

Examples

Common Patterns

Section Headers

Card Separators

Sidebar Layouts

Justified Content