Yugen UI

Divider

Divider is a thin line separating groups of content, optionally with text or an icon at the start, center or end.

Horizontal by default, drawn in stroke-2. Set vertical to separate items on the same row. appearance subtle / brand / strong changes the weight of the line.

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX
// npm install yugen-uiimport { Divider } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

Appearance

default (stroke-2), subtle (stroke-3), brand, strong (stroke-1).

MailCalendarPeople

Vertical

orientation="vertical" separates items on the same row and takes the height of the row.

Icon & inset

The content can be an icon; inset indents both ends by 12px.

Usage

Do
  • Use it to separate different groups of content on the same surface.
  • Keep text on a Divider short (“Or”, a group name).
Don't
  • Don't add a Divider where white space already separates the groups.
  • Don't use the brand appearance everywhere. Keep it for an important boundary.

Props

Prop · TypeDefaultDescription
orientation"horizontal" | "vertical"Default: "horizontal"Direction of the line. The old boolean vertical is deprecated (removed in 1.0).
alignContent"start" | "center" | "end"Default: "center"Position of the text / icon on the line.
appearance"default" | "subtle" | "brand" | "strong"Default: "default"Color of the line and the text.
insetbooleanDefault: falseIndents both ends by 12px.