Wensity

Separator

Dividers for layout sections, carrying text labels, gradient fades, dashed borders, and vertical split support.

separatordividerlinelabelgradientprimitive
Loading preview

Examples

Practical examples and common states for the same installable component.

Horizontal

Default horizontal line to divide rows of text.

examples/separator-horizontal.tsx
import { Separator } from "@/components/wensity/separator";


export function SeparatorHorizontal() {
  return (
    <div className="w-[320px] p-4 text-xs">
      <span className="text-zinc-400">System Logs</span>
      <Separator className="my-3" />
      <span className="text-zinc-400">Errors</span>
    </div>
  );
}

Vertical

Vertical lines to split columns or list elements.

examples/separator-vertical.tsx
import { Separator } from "@/components/wensity/separator";


export function SeparatorVertical() {
  return (
    <div className="flex h-8 items-center gap-4 text-xs p-4 text-zinc-400">
      <span>Dashboard</span>
      <Separator orientation="vertical" />
      <span>Analytics</span>
      <Separator orientation="vertical" />
      <span>Settings</span>
    </div>
  );
}

With Label

Splits divider line using custom text alignment settings.

examples/separator-label.tsx
import { Separator } from "@/components/wensity/separator";


export function SeparatorLabel() {
  return (
    <div className="w-[320px] p-4">
      <Separator label="securing connection" labelPosition="center" />
    </div>
  );
}

Gradient

Fades out transparently at the ends of the divider.

examples/separator-gradient.tsx
import { Separator } from "@/components/wensity/separator";


export function SeparatorGradient() {
  return (
    <div className="w-[320px] p-4">
      <Separator variant="gradient" />
    </div>
  );
}

Dashed

Uses a dashed style to draw a segment divider.

examples/separator-dashed.tsx
import { Separator } from "@/components/wensity/separator";


export function SeparatorDashed() {
  return (
    <div className="w-[320px] p-4">
      <Separator variant="dashed" />
    </div>
  );
}

Props

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"Axis the rule runs along.
variant"default" | "gradient" | "dashed""default"Line treatment.
labelReact.ReactNode-Text set into the rule, for section breaks such as OR.
labelPosition"start" | "center" | "end""center"Where the label sits along the rule.