Separator

1import { HorizontalSeparatorGroup, Separator } from "@ngrok/mantle/separator";2 3<div>4	<div className="space-y-1">5		<h4 className="text-sm font-medium leading-none">mantle</h4>6		<p className="text-muted-foreground text-sm">An open-source UI component library.</p>7	</div>8	<Separator className="my-4" />9	<Separator className="my-4" semantic />10	<div className="flex h-5 items-center gap-4 text-sm">11		Blog12		<Separator orientation="vertical" />13		Docs14		<Separator orientation="vertical" />15		Source16	</div>17	<HorizontalSeparatorGroup>18		<Separator />19		<h3>ngrok mantle</h3>20		<Separator />21	</HorizontalSeparatorGroup>22	<HorizontalSeparatorGroup>23		<h3>ngrok mantle</h3>24		<Separator />25	</HorizontalSeparatorGroup>26	<HorizontalSeparatorGroup>27		<Separator />28		<h3>ngrok mantle</h3>29	</HorizontalSeparatorGroup>30</div>;

1import { HorizontalSeparatorGroup, Separator } from "@ngrok/mantle/separator";2 3<form>4	<fieldset className="space-y-4">5		<HorizontalSeparatorGroup className="w-full" asChild>6			<legend>7				Choose your favorite fruit!8				<Separator asChild>9					<span />10				</Separator>11			</legend>12		</HorizontalSeparatorGroup>13		<div className="space-y-2">14			<div className="space-x-2">15				<input type="radio" id="apple" name="monster" value="apple" />16				<label htmlFor="apple">Apple</label>17			</div>18			<div className="space-x-2">19				<input type="radio" id="mango" name="monster" value="mango" />20				<label htmlFor="mango">Mango</label>21			</div>22			<div className="space-x-2">23				<input type="radio" id="pear" name="monster" value="pear" />24				<label htmlFor="pear">Pear</label>25			</div>26		</div>27	</fieldset>28</form>29 30<div className="flex h-5 items-center space-x-4 text-sm">31	<div>Blog</div>32	<Separator orientation="vertical" asChild>33		<span />34	</Separator>35	<div>Docs</div>36	<Separator orientation="vertical" asChild>37		<span />38	</Separator>39	<div>Source</div>40</div>