Divider Component — Astro

Divider Component

A simple divider for visually separating content. Supports horizontal (default) and vertical orientation, and an optional label (e.g. "OR") in the middle for horizontal dividers.

Add this component

The command below includes <strong>Divider</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

bash bash Copy code

npx rizzo-css add Divider

bash bash Copy code

pnpm dlx rizzo-css add Divider

bash bash Copy code

npx rizzo-css add Divider

bash bash Copy code

bunx rizzo-css add Divider

Props

• orientation (string, optional) - horizontal, vertical (default: horizontal)
• label (string, optional) - Optional text shown in the middle (horizontal only)
• class (string, optional) - Additional CSS classes

Basic Usage (horizontal)

---
import Divider from '../components/astro/Divider.astro';
---

<Divider />

<!-- Rizzo CSS. No script needed. -->
<hr class="divider" role="separator" />

<script>
  import { Divider } from '$lib/rizzo';
</script>

<Divider />

<script setup>
import Divider from '@/components/rizzo/Divider.vue';
</script>

<template>
  <Divider />
  <Divider label="OR" />
  <Divider orientation="vertical" />
</template>

import { Divider } from './components/react';

<Divider />
<Divider label="OR" />
<Divider orientation="vertical" />

With Label

Use label to show text in the middle (e.g. "OR" between two options).

<Divider label="OR" />

Vertical

Use orientation="vertical" inside a flex row to separate items. The parent should have a defined height (e.g. min-height or height).

<div style="display: flex; align-items: center; gap: var(--spacing-3); min-height: 3rem;">
  <span>Item 1</span>
  <Divider orientation="vertical" />
  <span>Item 2</span>
  <Divider orientation="vertical" />
  <span>Item 3</span>
</div>

Features

• Accessible - role="separator" and aria-orientation; optional aria-label when label is set
• Horizontal - Full-width line; optional label in the center
• Vertical - Full-height line for use in flex layouts
• Theme-aware - Uses --border and --text-dim

Other frameworks: Vanilla · Svelte · Vue · React