Separator

Visually separates content or UI elements for clarity and organization.

	<script lang="ts">
  import { Separator } from "$lib";
</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>

	<script lang="ts">
  import { Separator } from "$lib";
</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>

Bits UI

Headless UI components for Svelte.

Blog

Docs

Source

Structure

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

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

Component API

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.