UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Separator

separatorui
Boilerplate repo

Horizontal or vertical visual divider — a `<div>` with the right ARIA role and a registry-token border color. Use between sections, list rows, and toolbar groups.

Installation

$npx shadcn-svelte@latest add https://uipkge.dev/r/svelte/separator.json
Manifest:https://uipkge.dev/r/svelte/separator.jsonInstalls to:src/lib/components/ui/separator/

Examples

Loading interactive previews…

Props

NameType / ValuesDefaultRequired
orientation'horizontal' | 'vertical'horizontaloptional
decorative

Presentational only: hides from assistive tech. Set false for a semantic landmark.

booleantrueoptional
refHTMLDivElement | null—optional

Used by

Files installed (2)

  • src/lib/components/ui/separator/Separator.svelte1 kB
    <script lang="ts" module>
  import type { HTMLAttributes } from 'svelte/elements'

  export interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
    orientation?: 'horizontal' | 'vertical'
    /** Presentational only: hides from assistive tech. Set false for a semantic landmark. */
    decorative?: boolean
    ref?: HTMLDivElement | null
  }
</script>

<script lang="ts">
  import { cn } from '$lib/utils'

  let { class: className, orientation = 'horizontal', decorative = true, ref = $bindable(null), ...restProps }: SeparatorProps = $props()
</script>

<div
  bind:this={ref}
  data-uipkge=""
  data-slot="separator"
  data-orientation={orientation}
  role={decorative ? undefined : 'separator'}
  aria-orientation={decorative ? undefined : orientation}
  aria-hidden={decorative ? 'true' : undefined}
  class={cn(
    'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
    className,
  )}
  {...restProps}
></div>
  • src/lib/components/ui/separator/index.ts0.1 kB

Raw manifest:https://uipkge.dev/r/svelte/separator.json