Separator

Lockness UI Component

LLM DOCS:VIEW

DOCUMENTATION

Separator

A visual divider component for separating content. Supports horizontal and vertical orientations with accessibility support.

Installation

bash

deno run -A jsr:@lockness/ui add separator

Usage

tsx

import { Separator } from '@lockness/ui/components'

// Horizontal separator (default)
<Separator />

// With spacing
<Separator class="my-4" />

// Vertical separator
<div class="flex h-5 items-center">
  <span>Item 1</span>
  <Separator orientation="vertical" class="mx-2" />
  <span>Item 2</span>
</div>

// Semantic separator (not decorative)
<Separator decorative={false} />

Props

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Separator orientation
`decorative`	`boolean`	`true`	Whether the separator is decorative (for accessibility)
`class`	`string`	-	Additional CSS class names
`id`	`string`	-	Element id attribute

Orientation

Horizontal

tsx

<div class='space-y-4'>
    <p>Content above</p>
    <Separator />
    <p>Content below</p>
</div>

Vertical

tsx

<div class='flex h-5 items-center space-x-4 text-sm'>
    <span>Blog</span>
    <Separator orientation='vertical' />
    <span>Docs</span>
    <Separator orientation='vertical' />
    <span>Source</span>
</div>

CSS Variables

Variable	Description
`--separator-color`	Color of the separator line
`--separator-thickness`	Thickness of the separator line

Accessibility

When decorative={true} (default): Uses role="none" to indicate it's purely visual
When decorative={false}: Uses role="separator" with aria-orientation for semantic separation

Features

Accessible - Proper ARIA roles for screen readers
Orientations - Horizontal and vertical layouts
Themeable - Uses CSS variables for styling
Flexible - Works in flexbox and grid layouts

HORIZONTAL SEPARATOR

Content Above

Content Below

tsx

import { Separator } from '@lockness/ui/components'

<div>Content Above</div>
<Separator />
<div>Content Below</div>

VERTICAL SEPARATOR

Item 1

Item 2

Item 3

tsx

<div class="flex items-center h-5 space-x-4 text-sm">
    <div>Item 1</div>
    <Separator orientation="vertical" />
    <div>Item 2</div>
    <Separator orientation="vertical" />
    <div>Item 3</div>
</div>

WITH LABELS

tsx

<div class="flex items-center gap-4">
    <Separator class="flex-1" />
    <span class="text-sm text-muted-foreground">OR</span>
    <Separator class="flex-1" />
</div>

ACCESSIBILITY

By default, separators are decorative and hidden from screen readers. Set decorative={false} for semantic separators.

tsx

// Decorative (default) - hidden from screen readers
<Separator />
<Separator decorative={true} />

// Semantic - announced by screen readers
<Separator decorative={false} />

Edit this page