Separator

Hairline rule: semantic <hr> by default, vertical via data-orientation inside flex rows.

INSTALL

1pnpm dlx @sayagodev/mo add separator

Or import the files from the package (no copy):

1import "@sayagodev/mo/css/separator.css";

EXAMPLES

Default

shadcn/ui

The Foundation for your Design System

A set of beautifully designed components that you can customize, extend, and build on.

1<div class="flex flex-col gap-4">2  <div class="vstack gap-1">3    <div>shadcn/ui</div>4    <small class="text-light">The Foundation for your Design System</small>5  </div>6  <hr />7  <div>8    A set of beautifully designed components that you can customize, extend,9    and build on.10  </div>11</div>12

Vertical

1<nav class="hstack gap-4" aria-label="Site">2  <a href="#">Blog</a>3  <hr data-orientation="vertical" />4  <a href="#">Docs</a>5  <hr data-orientation="vertical" />6  <a href="#">Source</a>7</nav>8

List

Item 1: Value 1

Item 2: Value 2

Item 3: Value 3

1<div class="vstack gap-2" style="max-width: 24rem">2  <dl class="flex items-center justify-between">3    <dt>Item 1</dt>4    <dd class="text-light">Value 1</dd>5  </dl>6  <hr />7  <dl class="flex items-center justify-between">8    <dt>Item 2</dt>9    <dd class="text-light">Value 2</dd>10  </dl>11  <hr />12  <dl class="flex items-center justify-between">13    <dt>Item 3</dt>14    <dd class="text-light">Value 3</dd>15  </dl>16</div>17

1<mo-dropdown>2  <button type="button" class="outline" popovertarget="sep-menu">Options</button>3  <menu popover id="sep-menu">4    <div data-label>Group label</div>5    <button role="menuitem" type="button">Team</button>6    <button role="menuitem" type="button">Projects</button>7    <hr />8    <button role="menuitem" type="button">Invite users</button>9    <hr />10    <button role="menuitem" type="button" data-variant="danger">Delete project</button>11  </menu>12</mo-dropdown>13

USAGE

1<hr />2 3<!-- vertical, inside a flex row -->4<div class="hstack gap-4">5  <a href="#">Blog</a>6  <hr data-orientation="vertical" />7  <a href="#">Docs</a>8</div>

API

NAMEKINDDESCRIPTION

hrelementHorizontal hairline (base style)

[data-orientation="vertical"]attributeVertical rule; stretches in flex rows

--bordertokenColor source

FILES

src/css/separator.css

Install:mo add separator

THEMING · PLAYGROUND

This is the exact component from the examples above, wearing a completely different theme. Edit the tokens and --mo-* hooks in the editor — autocomplete knows them all — and the preview obeys in real time. Your CSS always wins.

Global tokens

--border

Preview

Nuo Field

Field sealing system

Field-grade components with tokens and zero dependencies.

Your CSS

Try it: type --mo- for the component hooks, or edit any value — the preview obeys in real time.