Skip to content
webjs

Separator

ui ↳ lib-utils

Preview

Above
Below
<div class="w-64">
  <div>Above</div>
  <div role="none" class="${separatorClass()} my-3" data-orientation="horizontal"></div>
  <div>Below</div>
</div>

Installation

webjs ui add separator

Orientation

Horizontal

Section A
Section B
<div class="w-64">
  <div class="text-sm pb-2">Section A</div>
  <div class=${separatorClass({ orientation: 'horizontal' })} role="separator" data-orientation="horizontal"></div>
  <div class="text-sm pt-2">Section B</div>
</div>

Vertical

Left
Right
<div class="flex h-12 items-center gap-3">
  <div class="text-sm">Left</div>
  <div class=${separatorClass({ orientation: 'vertical' })} role="separator" data-orientation="vertical"></div>
  <div class="text-sm">Right</div>
</div>

API Reference

Parts

Name Description
separatorClass({ orientation }) Apply to <div role="separator">.

Props

Prop Type Default
orientation "horizontal" | "vertical" "horizontal"

Source: components/ui/separator.ts

/**
 * Separator: horizontal or vertical divider. Tier-1 class helper. For
 * accessibility, set `role="separator"` + `aria-orientation` on the
 * element (or `role="none"` for purely decorative use).
 *
 * shadcn parity:
 *   Separator (orientation: horizontal | vertical, decorative: bool)
 *                          → separatorClass({ orientation }) + role + data-orientation
 *
 * A11y (required for accessible output): a meaningful divider needs
 * role="separator" plus aria-orientation. A purely decorative one needs
 * role="none" (or aria-hidden="true") so assistive tech does not announce
 * an empty separator.
 *
 * Design tokens used: --border.
 *
 * @example
 * ```html
 * <div role="none" class=${separatorClass()} data-orientation="horizontal"></div>
 * <div role="separator" aria-orientation="vertical"
 *      class=${separatorClass({ orientation: 'vertical' })}
 *      data-orientation="vertical"></div>
 * ```
 */
import { cn } from '../lib/utils.ts';

const BASE =
  'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px';

export type SeparatorOrientation = 'horizontal' | 'vertical';

export function separatorClass(_opts: { orientation?: SeparatorOrientation } = {}): string {
  // Orientation is driven by the `data-orientation` attribute on the element,
  // not by class variants: matches shadcn. The opts arg is reserved for
  // future variants (e.g. dashed) and to keep the signature stable.
  return cn(BASE);
}