Separator

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

API Reference

VUI

An open-source admin design system.

Docs

Components

Blocks

Installation

Nothing to add. This component ships as source in your download, so it is already in your project.

Filesrc/vui/separator.tsx

Import from@viliha/vui-react/separator

The exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.

Usage

separator-demo.tsx

import { Separator } from "@viliha/vui-react/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.

Prop	Type	Default
orientation	"horizontal" \| "vertical"	"horizontal"
decorative	boolean	true

Separator props

It takes no props of its own. Everything you pass reaches the underlying SeparatorPrimitive.Root primitive, so every attribute it accepts works here unchanged and nothing is invented on top.