shadcn-html / separator

Built with: CSS

Separator

Visually or semantically separates content. Built on the native <hr> element with support for vertical orientation and labeled separators. No JavaScript required.

Component Skill — components/separator/component-skill.md

Native basis

<hr> element (horizontal rule) and <div role="separator"> for vertical orientation.

Web Platform APIs

Classes

.separator .separator-label

Data attributes

• data-orientation — values: vertical

Variants

data-orientationDirection — Element *(default)*Horizontal — <hr> verticalVertical — <div role="separator">

ARIA

role="separator"<div>Required on vertical separators role="none"<hr>Marks decorative separators — hidden from AT aria-hidden="true"<hr>Alternative for decorative separators

Notes

• The vertical separator requires the parent to be a flex container.

• The labeled separator uses a flex layout with two <hr> elements flanking the label text.

• Decorative separators should use role="none" or aria-hidden="true".

• In forced-colors mode, the separator uses CanvasText system color.

• In prefers-contrast: more mode, thickness doubles to 2px.

• Separators are purely visual — no JavaScript required.

Horizontal

Default horizontal separator.

shadcn-html

Semantic HTML. Shadcn tokens. Plain CSS.

Blog Docs Source 
<hr class="separator">

Vertical

Vertical separator between inline items. Parent must be flex.

Blog Docs Source 
<div class="separator" data-orientation="vertical" role="separator"></div>

With Label

A separator with centered text label.

or continue with 
<div class="separator-label">
  <hr class="separator">
  <span>or continue with</span>
  <hr class="separator">
</div>

Menu

Vertical separators between menu items with descriptions.

Settings

Manage preferences

Account

Profile & security

Help

Support & docs

<div style="display:flex;align-items:stretch;">
  <div style="flex:1;padding:1rem;">
    <p>Settings</p>
    <p>Manage preferences</p>
  </div>
  <div class="separator" data-orientation="vertical" role="separator"></div>
  <div style="flex:1;padding:1rem;">
    <p>Account</p>
    <p>Profile &amp; security</p>
  </div>
  <div class="separator" data-orientation="vertical" role="separator"></div>
  <div style="flex:1;padding:1rem;">
    <p>Help</p>
    <p>Support &amp; docs</p>
  </div>
</div>

List

Horizontal separators between list items.

Item 1 Value 1
Item 2 Value 2
Item 3 Value 3 
<div>
  <div>Item 1 — Value 1</div>
  <hr class="separator">
  <div>Item 2 — Value 2</div>
  <hr class="separator">
  <div>Item 3 — Value 3</div>
</div>

Decorative

A purely visual divider hidden from assistive technology using role="none".

Content above

Content below

<hr class="separator" role="none">

CSS view file

/* -- Separator component ---------------------------------------- */

@layer components {
  .separator {
    border: none;
    margin: 0;
    flex-shrink: 0;
    background: var(--border);

    /* Horizontal (default) */
    height: 1px;
    width: 100%;

    /* Vertical */
    &[data-orientation="vertical"] {
      height: auto;
      width: 1px;
      align-self: stretch;
    }

    /* Decorative — hidden from assistive technology */
    &[aria-hidden="true"],
    &[role="none"] {
      /* No visual change — purely semantic */
    }
  }

  /* -- Labeled separator ------------------------------------- */
  .separator-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    & .separator { flex: 1; }

    & span {
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--muted-foreground);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      white-space: nowrap;
      flex-shrink: 0;
    }
  }

  /* -- Accessibility ----------------------------------------- */
  @media (forced-colors: active) {
    .separator {
      background: CanvasText;
    }
  }

  @media (prefers-contrast: more) {
    .separator {
      background: var(--foreground);
      height: 2px;

      &[data-orientation="vertical"] {
        width: 2px;
        height: auto;
      }
    }
  }
}