Accent theme

Base radius

Accent theme

Base radius

Colour scheme
Components

Separator

A real <hr>. Browsers already expose it to assistive tech as role="separator", a horizontal rule is exactly what a divider is. orientation="vertical" repaints it without changing what it means.

Above the rule.


Below the rule.

Left
Right
Usage
import { Separator } from "@kernelui/react";

<Separator />
<Separator orientation="vertical" />

Props

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