Separator

A thin rule that visually or semantically divides content. Built on base-ui Separator — a single Separator element that renders a bg-border line and carries the right ARIA role.

It stretches to fill its container: a horizontal separator spans full width, a vertical one stretches to the height of its flex parent. Reach for spacing utilities (e.g. my-4) to set the gap around it.

Horizontal

The default orientation. Drops a full-width 1px rule between stacked blocks of content.

Radix Primitives

An open-source UI component library.

Documentation

Guides and references for every part.

import { Separator } from "@vesyl/ui-next";

export default function SeparatorHorizontal() {
  return (
    <div className="w-full max-w-sm">
      <div className="space-y-1">
        <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
        <p className="text-sm text-muted-foreground">An open-source UI component library.</p>
      </div>
      <Separator className="my-4" />
      <div className="space-y-1">
        <h4 className="text-sm font-medium leading-none">Documentation</h4>
        <p className="text-sm text-muted-foreground">Guides and references for every part.</p>
      </div>
    </div>
  );
}

Vertical

Set orientation="vertical" to divide inline items. The separator stretches to its flex parent’s height, so give the row a height (here an HStack constrained to h-5).

Blog

Docs

Source

import { HStack, Separator } from "@vesyl/ui-next";

export default function SeparatorVertical() {
  return (
    <HStack gap={4} className="h-5 text-sm">
      <span>Blog</span>
      <Separator orientation="vertical" />
      <span>Docs</span>
      <Separator orientation="vertical" />
      <span>Source</span>
    </HStack>
  );
}

Reference

Separator

A single element. Extends base-ui Separator props.

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Direction of the rule; horizontal fills width, vertical fills height
`className`	`string`	—	Merged onto the element — use for spacing (`my-4`) or a custom color