Separator

Visual or semantic divider on bits-ui Separator. Horizontal by default; vertical with an explicit orientation prop. No motion — it's a line with intent.

API Reference Component Source

Horizontal

Bloom Design System

Tokens-first, headless primitives.

Token-driven color, Geist typography.

separator.svelte

<script lang="ts">
	import { Separator as SeparatorPrimitive } from 'bits-ui';
	import { cn } from '$lib/utils.js';

	let {
		ref = $bindable(null),
		class: className,
		'data-slot': dataSlot = 'separator',
		...restProps
	}: SeparatorPrimitive.RootProps = $props();
</script>

<SeparatorPrimitive.Root
	bind:ref
	data-slot={dataSlot}
	class={cn(
		'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px',
		// self-stretch breaks our layout, so we override the default
		'data-[orientation=vertical]:h-full',
		className
	)}
	{...restProps}
/>

Vertical

Docs

Tokens

Components

separator.svelte

<script lang="ts">
	import { Separator as SeparatorPrimitive } from 'bits-ui';
	import { cn } from '$lib/utils.js';

	let {
		ref = $bindable(null),
		class: className,
		'data-slot': dataSlot = 'separator',
		...restProps
	}: SeparatorPrimitive.RootProps = $props();
</script>

<SeparatorPrimitive.Root
	bind:ref
	data-slot={dataSlot}
	class={cn(
		'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px',
		// self-stretch breaks our layout, so we override the default
		'data-[orientation=vertical]:h-full',
		className
	)}
	{...restProps}
/>

Decorative vs semantic

By default the separator is announced to assistive tech. Set decorative to hide it from screen readers when the divider is purely visual.

Announced divider (default)

Decorative only

Screen readers skip the second rule.

separator.svelte

<script lang="ts">
	import { Separator as SeparatorPrimitive } from 'bits-ui';
	import { cn } from '$lib/utils.js';

	let {
		ref = $bindable(null),
		class: className,
		'data-slot': dataSlot = 'separator',
		...restProps
	}: SeparatorPrimitive.RootProps = $props();
</script>

<SeparatorPrimitive.Root
	bind:ref
	data-slot={dataSlot}
	class={cn(
		'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px',
		// self-stretch breaks our layout, so we override the default
		'data-[orientation=vertical]:h-full',
		className
	)}
	{...restProps}
/>

API reference

Inherits bits-ui Separator.Root props.

Type	Default	Description
`'horizontal' \| 'vertical'`	`'horizontal'`	Axis of the rule. Vertical needs a parent with explicit height.
`boolean`	`false`	When true the element is hidden from assistive tech (role="none"). Use for purely visual dividers.
`string`	—	Merged onto the rule via tailwind-merge.
`HTMLElement \| null`	`null`	Two-way-bindable element reference.