Divider

The Divider component provides a clear and semantically appropriate way to separate content blocks or inline elements in your layout. It’s ideal for enhancing readability and organizing information visually within your application.

Installation

Add the Divider component to your project using the OrbitUI CLI:

npx orbitkit@latest add divider

Usage

Import the Divider component and use it in your Astro components or pages. You can control its orientation using the orientation prop.

Preview

OrbitUI

Accessible, Customizable, & Lightweight component library.

Blog

Docs

Source

Code

index.astro

---
import { Divider } from "@/components/ui/divider";
---

<div class="mx-auto max-w-sm">
  <div class="space-y-1">
    <h4 class="text-sm font-medium leading-none">OrbitUI</h4>
    <p class="text-muted-foreground text-sm">
      Accessible, Customizable, & Lightweight component library.
    </p>
  </div>
  <Divider class="my-4" />
  <div class="flex h-5 items-center space-x-4 text-sm">
    <div>Blog</div>
    <Divider orientation="vertical" />
    <div>Docs</div>
    <Divider orientation="vertical" />
    <div>Source</div>
  </div>
</div>

Props

Divider

The Divider component extends standard HTML <div> attributes and accepts the following additional props:

Prop	Type	Default
orientation	horizontal, vertical	horizontal