Separator

Visual divider for separating content sections with horizontal and vertical orientations.

Content above

Content below

Orientation

Size

Decorative

<Separator
  decorative
/>

01 Examples

Inline Vertical Separator

Vertical separators as dividers between navigation items — a classic breadcrumb pattern.

<nav aria-label="Breadcrumb" class="flex items-center text-sm">
  <a href="#!" class="text-text-tertiary hover:text-text-primary transition-colors">Home</a>
  <Separator orientation="vertical" size="sm" class="mx-3 h-4" />
  <a href="#!" class="text-text-tertiary hover:text-text-primary transition-colors"
    >Products</a
  >
  <Separator orientation="vertical" size="sm" class="mx-3 h-4" />
  <a href="#!" class="text-text-tertiary hover:text-text-primary transition-colors"
    >Electronics</a
  >
  <Separator orientation="vertical" size="sm" class="mx-3 h-4" />
  <span class="text-text-primary font-medium">Headphones</span>
</nav>

Settings Card

Separators structuring a realistic settings panel — as a section divider and between in-list rows.

Account

Manage your profile and preferences

Jane Doe

jane@example.com

Language English

Timezone UTC+1

<div class="w-full max-w-sm">
  <Card padding="none">
    <div class="px-5 py-4">
      <h3 class="text-text-primary text-sm font-semibold">Account</h3>
      <p class="text-text-tertiary text-xs">Manage your profile and preferences</p>
    </div>
    <Separator size="sm" />
    <div class="divide-border-subtle space-y-0 divide-y">
      <div class="flex items-center justify-between px-5 py-3">
        <div class="flex items-center gap-3">
          <Avatar size="sm" name="JD" />
          <div>
            <p class="text-text-primary text-sm font-medium">Jane Doe</p>
            <p class="text-text-tertiary text-xs">jane@example.com</p>
          </div>
        </div>
        <Button variant="ghost" size="sm">Edit</Button>
      </div>
      <div class="flex items-center justify-between px-5 py-3">
        <span class="text-text-secondary text-sm">Language</span>
        <span class="text-text-tertiary text-sm">English</span>
      </div>
      <div class="flex items-center justify-between px-5 py-3">
        <span class="text-text-secondary text-sm">Timezone</span>
        <span class="text-text-tertiary text-sm">UTC+1</span>
      </div>
    </div>
    <Separator size="sm" />
    <div class="px-5 py-3">
      <Button variant="ghost" intent="danger" size="sm">Delete Account</Button>
    </div>
  </Card>
</div>

02 Customization

Separator with Label

A common pattern: text centered over a horizontal rule — typical for 'OR continue with' auth flows.

or continue with

Chapter 2

<div class="relative flex items-center">
  <Separator class="flex-1" />
  <span class="text-text-tertiary bg-surface-base px-3 text-xs font-medium uppercase"
    >or continue with</span
  >
  <Separator class="flex-1" />
</div>
<div class="relative flex items-center">
  <Separator
    class="!my-0 flex-1"
    slotClasses={{ base: 'bg-linear-to-r from-transparent to-border-subtle' }}
  />
  <span class="text-text-secondary bg-surface-base px-4 text-sm font-semibold tracking-wide"
    >Chapter 2</span
  >
  <Separator
    class="!my-0 flex-1"
    slotClasses={{ base: 'bg-linear-to-l from-transparent to-border-subtle' }}
  />
</div>

Separator supports the standard unstyled / slotClasses / preset trio despite its single base slot — a recurring rule treatment like the gradient fade can live in presets.Separator on BlocksProvider. See Customization.

03 Accessibility

ARIA Roles

By default, decorative={true} renders role="none" so screen readers skip the element entirely. Set decorative={false} to use role="separator" with aria-orientation, announcing it as a meaningful content boundary.

When to use semantic mode

Use decorative={false} when the separator marks a thematic shift — e.g. between unrelated content sections. Keep the default for purely visual spacing between related items.

HTML Semantics

Renders as a <div> rather than <hr> for full ARIA control. The role and aria-orientation attributes are set automatically based on the decorative and orientation props.

04 API Reference

9 props

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS class merged onto the root element.
`decorative`	`boolean`	—	When true, the separator is purely visual (role="none"); when false, it uses role="separator" with aria-orientation.
`orientation`	horizontalvertical	—	Horizontal renders a full-width line; vertical renders a full-height line (e.g. inside flex rows).
`preset`	`string`	—	Apply a named preset registered via `<BlocksProvider presets={{ Separator: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project.
`size`	smmdlg	—	Controls margin around the line — sm (0.5 rem), md (1 rem), lg (1.5 rem).
`slotClasses`	`Partial<Record<'base', string>>`	—	Per-slot class overrides.
`unstyled`	`boolean`	—	Strip all default styles; combine with slotClasses to rebuild from scratch.
`...HTMLAttributes<HTMLDivElement>` inherited	`HTMLAttributes`	—	HTML attributes (excluding: 'children' \| 'class')
`...SeparatorVariants` variant	`VariantProps`	—	Styling variants from SeparatorVariants

05 Types

Local type definitions used by this component.

2 types

Only referenced

	Name	Kind	Category	Used by	Description
	SeparatorProps	interface	props	0	—
	SeparatorVariants	type	variant	1	—

06 Installation

Import

import { Separator } from '@urbicon-ui/blocks';

llm.txt