Separator

A thin visual divider marking a boundary between two groups of content.

sergiodxa/monorepo

Small TypeScript packages built on web standards.

TypeScript

MIT

51 packages

Latest release2026.9.17

Last deploy12 minutes ago

View code

<Card>
	<Card.Header>
		<Card.Title>sergiodxa/monorepo</Card.Title>
		<Card.Description>Small TypeScript packages built on web standards.</Card.Description>
	</Card.Header>
	<Card.Content>
		<div mix={[hstack({ gap: 4, align: "center" })]}>
			<span>TypeScript</span>
			<Separator aria-orientation="vertical" />
			<span>MIT</span>
			<Separator aria-orientation="vertical" />
			<span>51 packages</span>
		</div>

		<Separator />

		<div mix={[hstack({ gap: 2, align: "center", justify: "between" })]}>
			<Text>Latest release</Text>
			<Badge color="success" variant="secondary">2026.9.17</Badge>
		</div>

		<Separator />

		<div mix={[hstack({ gap: 2, align: "center", justify: "between" })]}>
			<Text>Last deploy</Text>
			<Text>12 minutes ago</Text>
		</div>
	</Card.Content>
</Card>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { Separator } from "@sdxc/ui";

Renders a static hairline divider between two groups of content, carrying the separator role and defaulting to a full-width horizontal line; setting aria-orientation="vertical" flips it to a full-height vertical line.

Examples

<Separator aria-orientation="vertical" />

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Also accepts everything in TagProps<"div">.