Skip to main content
/mantle

Separator

Visually or semantically separates content.

When to use

A Separator divides adjacent content without a box, in a row or in a column.

  • Prefer Card when the content needs a border on every side.
  • Prefer Well when the content needs a recessed background, not a line.
  • Prefer DescriptionList when the content is key and value pairs, which carry their own rows.

mantle

An open-source UI component library.

Blog
Docs
Source

ngrok mantle

ngrok mantle

ngrok mantle

import { HorizontalSeparatorGroup, Separator } from "@ngrok/mantle/separator"; <div>	<div className="space-y-1">		<h4 className="text-sm font-medium leading-none">mantle</h4>		<p className="text-muted-foreground text-sm">An open-source UI component library.</p>	</div>	<Separator className="my-4" />	<Separator className="my-4" semantic />	<div className="flex h-5 items-center gap-4 text-sm">		Blog		<Separator orientation="vertical" />		Docs		<Separator orientation="vertical" />		Source	</div>	<HorizontalSeparatorGroup>		<Separator />		<h3>ngrok mantle</h3>		<Separator />	</HorizontalSeparatorGroup>	<HorizontalSeparatorGroup>		<h3>ngrok mantle</h3>		<Separator />	</HorizontalSeparatorGroup>	<HorizontalSeparatorGroup>		<Separator />		<h3>ngrok mantle</h3>	</HorizontalSeparatorGroup></div>;

Polymorphism

When you want to render something else as a HorizontalSeparatorGroup or Separator, you can use the asChild prop to compose.

Choose your favorite fruit!
Blog
Docs
Source
import { HorizontalSeparatorGroup, Separator } from "@ngrok/mantle/separator"; <form>	<fieldset className="space-y-4">		<HorizontalSeparatorGroup className="w-full" asChild>			<legend>				Choose your favorite fruit!				<Separator asChild>					<span />				</Separator>			</legend>		</HorizontalSeparatorGroup>		<div className="space-y-2">			<div className="space-x-2">				<input type="radio" id="apple" name="monster" value="apple" />				<label htmlFor="apple">Apple</label>			</div>			<div className="space-x-2">				<input type="radio" id="mango" name="monster" value="mango" />				<label htmlFor="mango">Mango</label>			</div>			<div className="space-x-2">				<input type="radio" id="pear" name="monster" value="pear" />				<label htmlFor="pear">Pear</label>			</div>		</div>	</fieldset></form> <div className="flex h-5 items-center space-x-4 text-sm">	<div>Blog</div>	<Separator orientation="vertical" asChild>		<span />	</Separator>	<div>Docs</div>	<Separator orientation="vertical" asChild>		<span />	</Separator>	<div>Source</div></div>

Color

The separator renders in the semantic separator color token: gray-500/20 in light and gray-600/20 in dark. This is the canonical divider color across mantle: Accordion dividers, DropdownMenu.Separator, Command.Separator, Select.Separator, and the rest all resolve to it.

Reuse the same color on your own dividers instead of hard-coding it:

  • Blog
  • Docs
  • Source
<div className="border-separator w-full border-b" /><ul className="divide-separator w-full divide-y">	<li className="py-1">Blog</li>	<li className="py-1">Docs</li>	<li className="py-1">Source</li></ul><span className="bg-separator h-px w-full" />

API Reference

Separator

Visually or semantically separates content.

All props from div, plus:

PropTypeDefaultDescription
orientation?"horizontal" | "vertical""horizontal"The orientation of the separator, does it render horizontally or vertically.
semantic?booleanfalseIf true, the separator renders with all accessibility-related attributes and role="separator". If false, the separator is purely decorative and all accessibility-related attributes are updated so that the rendered element is removed from the accessibility tree.
asChild?booleanfalseUse the asChild prop to compose the Separator styling and functionality onto alternative element types or your own React components.
Data AttributeValueDescription
data-slot"separator"Names the part.
data-orientation"horizontal" | "vertical"The resolved orientation, after a HorizontalSeparatorGroup wins.
data-separatorpresentPresence-only. Lets a group exempt separators from shrink-0.

HorizontalSeparatorGroup

A container to layout a group of horizontal separators and other children. Overrides all children Separators to be orientation="horizontal". All props from div, plus:

PropTypeDefaultDescription
asChild?booleanfalseUse the asChild prop to compose the HorizontalSeparatorGroup styling and functionality onto alternative element types or your own React components.
Data AttributeValueDescription
data-slot"horizontal-separator-group"Names the part.
data-horizontal-separator-grouppresentPresence-only. Child separators stretch under it.