Separator

Visual divider for content sections, horizontal or vertical.

Content above

Content below

Orientation

Size

Decorative

<Separator
  decorative
/>

01 Examples

Inline metadata

A vertical separator is h-full, so give it an explicit height (here h-4) inside a flex row.

Engineering

12 min read

March 2024

<div class="text-text-secondary flex items-center gap-3 text-sm">
  <span>Engineering</span>
  <Separator orientation="vertical" class="h-4" />
  <span>12 min read</span>
  <Separator orientation="vertical" class="h-4" />
  <time datetime="2024-03">March 2024</time>
</div>

Section boundaries in a card

Reach for a Separator to set off a distinct region. Use divide-y for the rules between repeated 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 />
    <div class="divide-border-subtle divide-y">
      <div class="flex items-center justify-between px-5 py-3">
        <div class="flex items-center gap-3">
          <Avatar size="sm" name="Jane Doe" randomColor />
          <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 />
    <div class="px-5 py-3">
      <Button variant="ghost" intent="danger" size="sm">Delete account</Button>
    </div>
  </Card>
</div>

Labeled divider

Separator draws only the rule, so build a labeled break yourself: two flex-1 separators around a centered label make the 'or continue with' divider on a sign-in form.

or continue with

<div class="flex w-full max-w-sm items-center gap-3">
  <Separator class="flex-1" />
  <span class="text-text-tertiary text-xs font-medium uppercase">or continue with</span>
  <Separator class="flex-1" />
</div>

02 Customization

Custom rules

A class swaps the fill while the rule keeps its width and thickness. The first is a gradient that fades at both ends, the second a dashed border. Both clear the default flat fill with bg-transparent and take their colour from the border-strong token. Neither is reachable through the standard props.

<div class="mx-auto flex w-full max-w-sm flex-col gap-6">
  <Separator
    class="via-border-strong bg-transparent bg-linear-to-r from-transparent to-transparent"
  />
  <Separator class="border-border-strong border-t border-dashed bg-transparent" />
</div>

This is one of five ways to restyle a block. See Customization for class, slotClasses, unstyled, preset and provider-level overrides.

03 Accessibility

Roles and semantics

Separator renders a <div> rather than an <hr>, so its role is set explicitly. The default decorative={true} gives it role="none", and screen readers skip it. Set decorative={false} for role="separator" with a matching aria-orientation, which announces the line as a real content boundary.

When to use semantic mode

Keep the default for spacing between related items. Reach for decorative={false} when the line marks a thematic shift, such as a boundary between two unrelated sections, where a screen reader announcing the break helps.

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