Separator

A separator draws a thin line between two groups of content, so users see where one group ends and the next begins. A horizontal separator takes the full width of its parent, and a vertical separator sits in a flex or grid parent and stretches to the height of its row. The line has no margin of its own, so the gap of its parent sets the distance to the content. The separator reports its role and its orientation to assistive technology.

UsageCopy Anchor Link

import { Separator } from "@biem/ui/components/ui/separator";

export function SeparatorDefault() {
	return (
		<div className="flex w-full max-w-sm flex-col gap-4 text-sm">
			<div className="flex flex-col gap-1">
				<div className="font-medium">Transfer 4821</div>
				<div className="text-muted-foreground">12 cases from the warehouse to the store</div>
			</div>
			<Separator/>
			<p>The warehouse ships the cases on Monday, and the store receives them on Tuesday.</p>
		</div>
	);
}

ExamplesCopy Anchor Link

VerticalCopy Anchor Link

Content that sits side by side in one line, such as groups of actions in a toolbar, needs a division between its items rather than below them. With orientation set to "vertical", the separator divides neighboring items within a row and takes the height of that row, so users tell the groups apart at a glance. It also reports the vertical orientation to assistive technology.

API ReferenceCopy Anchor Link