Separator

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>

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>