Separator

A rule, optionally labelled — decorative by default, semantic when you ask for it.

Source: 1 file
Dependencies: none
Playground: yes

Examples

Every variant of the shipped component, live. Switch the layout to read them as a table or one at a time, and open Code for the file behind them.

Horizontal

Radix Colors

An open-source color system for building websites.

Blog

Docs

Source

<Separator />

Installation

One package for the whole library — run this once and every component on this site is importable. Adding the tokens to your stylesheet is the other half; the installation guide covers it.

npm install kipui

import { Separator } from "kipui";

Peer dependencies

react 19

react-dom 19

tailwindcss 4

Bundled dependencies

None beyond the peers above.

Usage

separator-example.tsx

import { Separator } from "kipui";

<Separator label="or" labelPosition="center" />

Leave `decorative` on for rules inside menus and toolbars; turn it off only when the divide carries meaning.
`label` is horizontal-only — a labelled vertical rule has nowhere to put the text.

Playground

Change the props and the snippet underneath updates with them.

Preview

Props

variantsolid

sizesm

labelor

labelPositioncenter

<Separator
  variant="solid"
  size="sm"
  label="or"
  labelPosition="center"
/>

API reference

Transcribed from the component's own types. Props with no default are required.

Prop	Default	Description
orientation"horizontal" \| "vertical"	"horizontal"	Axis of the rule.
variant"solid" \| "dashed" \| "dotted" \| "gradient"	"solid"	Stroke style.
size"sm" \| "md" \| "lg"	"sm"	Line thickness — 1px, 2px, 4px.
decorativeboolean	true	False exposes a semantic `separator` role.
labelReactNode	required	Optional label. Horizontal orientation only.
labelPosition"start" \| "center" \| "end"	"center"	Where the label sits on the rule.