Wensity

Separator

Dividers for layout sections, labels, gradients, and vertical splits.

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>
  );
}