Separator React component for Tailwind CSS v4
v1.0.0Added in 1.0.0
A React separator: a thin divider between groups of content, horizontal or vertical, solid, dashed or dotted, with an optional label.
It is a quiet line, nothing to press. Give it a label and the text or icon sits in the line, centered or near one end, as plain text or a small pill. Vertical separators stretch to the height of the row they sit in, or take the height you give them with a className. Screen readers skip a decorative line and read its label as plain text; with decorative off it is announced as a separator named by its label. The demo around it is a real sign-in card: the buttons load, the email field validates, Enter sends. In the toolbar example the arrow keys, Home and End move between the buttons.
Separator is a free React component in the React layout components category, written in TypeScript for React 19 and Tailwind CSS v4. It installs as source with npx wingo-ui@latest add separator, together with Tones and UIProvider and the npm package @radix-ui/react-separator.
Add to a project
Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup
npx wingo-ui@latest add separatorUsage
Import Separator from @/components/ui/separator.
import { Separator } from "@/components/ui/separator"
export function MetaRow() {
return (
<div className="flex flex-col gap-4">
<div className="flex items-center gap-3 text-sm text-muted-foreground">
<span>Brooklyn</span>
<Separator orientation="vertical" className="h-3.5 self-center" />
<span>today, 2:20 PM</span>
<Separator orientation="vertical" className="h-3.5 self-center" />
<span>$1,200</span>
</div>
<Separator label="or" />
<Separator tone="danger" variant="dashed" label="Danger zone" labelPosition="start" />
</div>
)
}Props
labeldefault""ReactNodeText or an icon in the line, like "or", a date or a <Star />. An empty string or no label draws the plain line. The playground falls back to "or".
variantdefault"solid""solid" | "dashed" | "dotted"Line style. Dashed and dotted are drawn with a border so the pattern stays crisp; in neutral they are a step darker so they read as strong as the solid hairline.
tonedefault"neutral""neutral" | "brand" | "success" | "warning" | "danger" | "info"neutral is the hairline (10% of the text color, so it works on every surface in both themes). Any other tone colors the line with its border color and the label with its text color.
colordefault""stringAny CSS color. Replaces the tone: the line is the color at 45%, the label mixes it toward the text color for contrast. Leave empty to use the tone.
thicknessdefault11 | 2Line thickness in px. 2 suits section breaks and dashed dividers; solid 2px lines get rounded ends.
labelVariantdefault"plain""plain" | "soft" | "outline"How the label sits in the line: plain text, a soft tinted pill (chat date dividers, "3 new messages") or an outlined pill in the line color.
fadedefaultfalsebooleanFades the line out toward its ends. With a label, each long side fades toward its outer end (mirrored in right-to-left layouts); the 16px stub of a start or end label stays solid.
orientationdefault"horizontal""horizontal" | "vertical"Vertical stretches to the height of the flex row it sits in and falls back to 16px in a parent that is not flex, so it never disappears. A height in className (h-3.5 self-center) wins. A vertical label stacks between two line segments and wraps at 96px, so a long one never squeezes the columns beside it.
labelPositiondefault"center""start" | "center" | "end"Where the label sits. start and end keep a 16px stub of line before or after it.
spacingdefault"none""none" | "sm" | "md" | "lg"Margin on both sides along the axis: 0, 8, 16 or 24px (above and below a horizontal line, left and right of a vertical one).
insetdefault0numberPixels of empty space before the line (after it in right-to-left layouts), taken off its width so it never overflows. For list rows whose divider starts after the icon, like iOS settings.
decorativedefaulttruebooleanOn by default: the line is hidden from assistive tech (role="none"). Turn it off between real sections for role="separator" with aria-orientation; a text label becomes its accessible name.
classNamesPartial<Record<"line" | "label", string>>Extra classes for the inner parts: each line segment (the root itself when there is no label) and the label.
classNamestringExtra classes for the root, merged last. A short vertical rule in a text row: className="h-3.5 self-center". Any line color: className="[--separator-color:red]".
Examples
Line styles
Solid, dashed and dotted at 1 and 2px, plus a line that fades out at both ends.
Chat date dividers
The label sits at the start, in the center or at the end; start and end keep a 16px stub of line.
Vertical
Between items in a meta row and between groups in a toolbar. A className sets a shorter rule.
An icon as the label
A star between two sections of a listing, with fade so the break feels soft.
Inset list dividers
inset={64} starts each line under the title, after the 36px icon, like iOS settings.
Danger zone
A danger dashed separator marks the destructive part of a settings page. Delete asks twice.
Pill labels and colors
Soft and outlined pills, a brand unread divider and a custom color at 2px.
Dependencies
Files
- components/ui/separator.tsx
FAQ
Is the React Separator component free?
Yes. The source is free and needs no account: copy it from the Code tab or install it with the CLI.
How do I install Separator?
Run npx wingo-ui@latest add separator. It also adds the Wingo UI items it builds on (Tones and UIProvider) and the npm package @radix-ui/react-separator. With shadcn, run npx shadcn@latest add https://wingo-ui.com/r/separator.json.