Separator — Vanilla

Thin separator line with vanilla HTML. Ensure Rizzo CSS is loaded.

Separator

Minimal line; use Divider when you need a label (e.g. "OR"). Classes: separator, separator--horizontal (default), separator--vertical.

Add this component

The command below includes <strong>Separator</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun
Live example
Above
Below

HTML

html html 
<div class="separator separator--horizontal" role="separator" aria-orientation="horizontal"></div>

<!-- Vertical (inside flex): -->
<div style="display: flex; align-items: center; gap: var(--spacing-3); min-height: 2rem;">
  <span>Left</span>
  <div class="separator separator--vertical" role="separator" aria-orientation="vertical"></div>
  <span>Right</span>
</div>

Other frameworks: Astro · Svelte · Vue · React