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
ref bindable prop
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See delegation docs for more information.

Default: undefined
Data Attribute Value Description
data-orientation
enum

The orientation of the separator.

data-separator-root
''

Present on the root element.