Separator

Visually or semantically separates content.

Horizontal

shadcn/ui

The Foundation for your Design System

A set of beautifully designed components that you can customize, extend, and build on.

Vertical

Blog

Docs

Source

Vertical Menu

Settings Manage preferences

Account Profile & security

Help Support & docs

In List

Item 1: Value 1

Item 2: Value 2

Item 3: Value 3

<script lang="ts">
  import { Example, ExampleWrapper } from '@sveltery/components/example';
  import { Separator } from '@sveltery/components/separator';
</script>

{#snippet SeparatorHorizontal()}
  <Example title="Horizontal">
    <div class="flex flex-col gap-4 text-sm style-lyra:text-xs/relaxed">
      <div class="flex flex-col gap-1">
        <div class="leading-none font-medium">shadcn/ui</div>
        <div class="text-muted-foreground">The Foundation for your Design System</div>
      </div>
      <Separator />
      <div>
        A set of beautifully designed components that you can customize, extend, and build on.
      </div>
    </div>
  </Example>
{/snippet}

{#snippet SeparatorVertical()}
  <Example title="Vertical">
    <div class="flex h-5 items-center gap-4 text-sm style-lyra:text-xs/relaxed">
      <div>Blog</div>
      <Separator orientation="vertical" />
      <div>Docs</div>
      <Separator orientation="vertical" />
      <div>Source</div>
    </div>
  </Example>
{/snippet}

{#snippet SeparatorVerticalMenu()}
  <Example title="Vertical Menu">
    <div class="flex items-center gap-2 text-sm md:gap-4 style-lyra:text-xs/relaxed">
      <div class="flex flex-col gap-1">
        <span class="font-medium">Settings</span>
        <span class="text-xs text-muted-foreground">Manage preferences</span>
      </div>
      <Separator orientation="vertical" />
      <div class="flex flex-col gap-1">
        <span class="font-medium">Account</span>
        <span class="text-xs text-muted-foreground">Profile & security</span>
      </div>
      <Separator orientation="vertical" />
      <div class="flex flex-col gap-1">
        <span class="font-medium">Help</span>
        <span class="text-xs text-muted-foreground">Support & docs</span>
      </div>
    </div>
  </Example>
{/snippet}

{#snippet SeparatorInList()}
  <Example title="In List">
    <div class="flex flex-col gap-2 text-sm style-lyra:text-xs/relaxed">
      <dl class="flex items-center justify-between">
        <dt>Item 1</dt>
        <dd class="text-muted-foreground">Value 1</dd>
      </dl>
      <Separator />
      <dl class="flex items-center justify-between">
        <dt>Item 2</dt>
        <dd class="text-muted-foreground">Value 2</dd>
      </dl>
      <Separator />
      <dl class="flex items-center justify-between">
        <dt>Item 3</dt>
        <dd class="text-muted-foreground">Value 3</dd>
      </dl>
    </div>
  </Example>
{/snippet}

<ExampleWrapper>
  {@render SeparatorHorizontal()}
  {@render SeparatorVertical()}
  {@render SeparatorVerticalMenu()}
  {@render SeparatorInList()}
</ExampleWrapper>

Installation

Install the dependencies

pnpm add cn class-variance-authority github:sveltery/base

Copy the component

Copy the following files into src/lib/components/ui/separator.

src/lib/components/ui/separator/Separator.svelte

<script lang="ts">
  import { Separator as Primitive } from '@sveltery/base/separator';
  import { cn } from 'cn';
  import type { SeparatorProps } from './types.js';
  let { orientation = 'horizontal', class: classProp, ...props }: SeparatorProps = $props();
  const className = $derived(cn('shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch', classProp));
</script>
<Primitive data-slot="separator" {orientation} class={className} {...props} />

src/lib/components/ui/separator/types.ts

export type { SeparatorProps, SeparatorState } from '@sveltery/base/separator';

src/lib/components/ui/separator/index.ts

export { default as Separator } from './Separator.svelte';
export type { SeparatorProps, SeparatorState } from './types.js';

Update the import paths

Change the imports to match your project setup.

Usage

<script lang="ts">
  import { Separator } from '$lib/components/ui/separator';
</script>

<Separator />

API reference

Separator is styled on top of the Sveltery Base Separator primitive, which owns its behavior, focus handling and accessibility. See the Base UI Separator documentation for the behavior it ports.