Separator

Visually separates content or UI elements for clarity and organization.

Bits UI

Headless UI components for Svelte.

Blog
Docs
Source
	<script lang="ts">
  import { Separator } from "bits-ui";
</script>
 
<div>
  <div class="space-y-1">
    <h4 class="font-semibold">Bits UI</h4>
    <p class="text-sm text-muted-foreground">
      Headless UI components for Svelte.
    </p>
  </div>
  <Separator.Root
    class="my-4 shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-[1px]"
  />
  <div class="flex h-5 items-center space-x-4 text-sm">
    <div>Blog</div>
    <Separator.Root
      orientation="vertical"
      class="my-4 shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-[1px]"
    />
    <div>Docs</div>
    <Separator.Root
      orientation="vertical"
      class="my-4 shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-[1px]"
    />
    <div>Source</div>
  </div>
</div>
	

Structure

	<script lang="ts">
	import { Separator } from "bits-ui";
</script>
 
<Separator.Root />
	

API Reference

Separator.Root

An element used to separate content.

Property Type Description
orientation
enum

The orientation of the separator.

Default: 'horizontal'
decorative
boolean

Whether the separator is decorative or not, which will determine if it is announce by screen readers.

Default: false
asChild
boolean

Whether to use render delegation with this component or not.

Default: false
el
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Default: undefined
Slot Property Type Description
builder
object

The builder attributes and actions to apply to the element if using the asChild prop with delegation.

Data Attribute Value Description
data-orientation
enum

The orientation of the separator.

data-separator-root
——

Present on the root element.