Separator
Visually or semantically separates content
import { Separator } from "@plexui/ui/components/Separator";Examples
Overview
Aisha Cooper
Engineering · Platform team
Shipped 24 pull requests this week across CI/CD and developer tooling.
Vertical
MIT license
12k weekly downloads
48 kB bundle
Menu
StarterFree · 1 project
Pro$19/mo · Unlimited
EnterpriseCustom · Priority SLA
List
- Version
- 0.9.0
- Published
- 2 days ago
- Bundle
- 48 kB
- License
- MIT
API
Separator
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Direction of the divider |
decorative | boolean | true | When true, the separator is ignored by assistive technologies. Set false when the divider carries semantic grouping (renders role="separator"). |
className | string | — | Applied to the root <div> |
All other <div> attributes are forwarded.
Styling
Colors and thickness are controlled by component tokens:
--separator-color— background color (defaults to--color-border)--separator-thickness— line thickness (defaults to1px)
Override them at any scope to change the divider's look:
.my-section {
--separator-color: var(--color-border-strong);
--separator-thickness: 2px;
}