Separator

Stable

Visually or semantically separates content.

Examples

Basic Usage

System Logs

View recent activities.

Access
Firewall
Intrusion
tsx
<div>
  <div className="space-y-1">
    <h4 className="text-sm font-medium leading-none text-slate-200">System Logs</h4>
    <p className="text-sm text-slate-400">View recent activities.</p>
  </div>
  <Separator className="my-4" />
  <div className="flex h-5 items-center space-x-4 text-sm text-slate-400">
    <div>Access</div>
    <Separator orientation="vertical" />
    <div>Firewall</div>
    <Separator orientation="vertical" />
    <div>Intrusion</div>
  </div>
</div>

API Reference

PropertyDescriptionTypeDefault
orientationThe orientation of the separator."horizontal" | "vertical""horizontal"
decorativeWhether the separator is purely decorative (aria-hidden).booleantrue