Core ElementsFree

Separator

A thin dividing line, horizontal or vertical, solid or dashed.

Usage

bash

npm install @wunderui/react

Then import what you need:

tsx

import { Separator } from "@wunderui/react"

Horizontal and vertical lines, a label in the middle or at either end, a badge or button on the line, and a dashed line.

Left

Middle

Right

or continue with email

Section

Today

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

Social sign-in buttons, then “or continue with email” on a divider, then the form.

Create your account

Start your 14-day trial.

or continue with email

The same sign-up card stacked for a phone screen.

Create your account

Start your 14-day trial.

or continue with email

A plain divider between the form and the link back to sign-in.

Reset password

We’ll email you a reset link.

Email