Separator
Disclosure & LayoutLocal guide ↗
import { Separator } from "bits-ui" Semantic horizontal divider
A content boundary that remains available to assistive technology
Environment
Production cluster
eu-west · 12 healthy services
Uptime99.99%
Latency42 ms
Regions4
<script lang="ts">
import { Separator } from 'bits-ui';
</script>
<section class="panel mx-auto w-full max-w-lg p-5">
<div>
<p class="text-xs font-medium tracking-widest text-brand-400 uppercase">Environment</p>
<h3 class="mt-1 text-lg font-semibold">Production cluster</h3>
<p class="muted mt-1 text-sm">eu-west · 12 healthy services</p>
</div>
<Separator.Root decorative={false} class="my-5 h-px w-full bg-ink-700" />
<div class="grid grid-cols-3 gap-4 text-sm">
<div><span class="muted block text-xs">Uptime</span><strong class="mt-1 block">99.99%</strong></div>
<div><span class="muted block text-xs">Latency</span><strong class="mt-1 block">42 ms</strong></div>
<div><span class="muted block text-xs">Regions</span><strong class="mt-1 block">4</strong></div>
</div>
</section>
Decorative vertical dividers
Visual rhythm between related links without extra screen-reader output
<script lang="ts">
import { Separator } from 'bits-ui';
</script>
<nav aria-label="Project resources" class="mx-auto flex h-9 w-fit items-center rounded-lg border border-ink-800 bg-ink-900 px-2 text-sm">
<a class="rounded px-3 py-1.5 text-ink-200 hover:bg-ink-800 hover:text-ink-50" href="/">Overview</a>
<Separator.Root orientation="vertical" decorative class="mx-1 h-5 w-px bg-ink-700" />
<a class="rounded px-3 py-1.5 text-ink-200 hover:bg-ink-800 hover:text-ink-50" href="/components">Components</a>
<Separator.Root orientation="vertical" decorative class="mx-1 h-5 w-px bg-ink-700" />
<a class="rounded px-3 py-1.5 text-ink-200 hover:bg-ink-800 hover:text-ink-50" href="/builder">Builder</a>
</nav>
Orientation defaults to horizontal and is reflected by data-orientation for styling. Set orientation="vertical" explicitly and give the element a usable height for vertical layouts.
decorative defaults to false, so the separator is announced by screen readers. Use decorative only when the line is purely visual and the surrounding structure already conveys the grouping.