npm

Separator

Separator is a thin line that divides content, horizontally or vertically.

VUI

An open-source admin design system.

Docs
Components
Blocks

Installation

pnpm add @viliha/vui-ui

Then import from @viliha/vui-ui/separator.

Usage

separator-demo.tsx
import { Separator } from "@viliha/vui-ui/separator";

export function Example() {
  return (
    <div>
      <p>An open-source admin design system.</p>
      <Separator className="my-4" />
      <div className="flex h-5 items-center gap-4 text-sm">
        <span>Docs</span>
        <Separator orientation="vertical" />
        <span>Components</span>
        <Separator orientation="vertical" />
        <span>Blocks</span>
      </div>
    </div>
  );
}

API Reference

Built on the Radix Separator primitive.

PropTypeDefault
orientation"horizontal" | "vertical""horizontal"
decorativebooleantrue