Separator

A line between groups of content, horizontal or vertical, as thick as the village's borders.

Installation

npx rasengan-ui add separator

Or with the shadcn CLI, from the registry:

npx shadcn@latest add https://ui.rasengan.dev/r/base/separator.json

Usage

import { Separator } from "@/components/ui/separator";
 
export function Links() {
  return (
    <div className="flex h-5 items-center gap-4 text-sm">
      <a href="/docs">Docs</a>
      <Separator orientation="vertical" />
      <a href="/blog">Blog</a>
    </div>
  );
}

Variants

default is a solid line; dashed a dashed one of the same width, for a softer break.

Villages

It is --border-width thick and --border coloured: a hairline in Konoha and Kiri, a 2px ink rule in Iwa.

Accessibility

• A role="separator" with aria-orientation. When it is only decoration, between items a list already separates, it can be left out of the accessibility tree with aria-hidden.

API reference

The props of Base UI's Separator (orientation, default "horizontal"), plus variant ("default" \| "dashed") and className. separatorVariants({ variant }) returns its classes.