Separator
Visually or semantically separates content.
Installation
import { Separator } from "@sourceful-energy/ui"Usage
Solar Dashboard
Monitor your energy production.
Overview
Analytics
Settings
Examples
Horizontal
Energy Production
Today: 24.5 kWh
Energy Consumption
Today: 18.2 kWh
Net Export
Today: 6.3 kWh
Vertical
Devices
Analytics
Reports
Settings
In Card
Solar Inverter #1Online
Power
4.2 kW
Today
18.5 kWh
With Label
Or continue with
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | The orientation of the separator. |
| decorative | boolean | true | Whether the separator is purely decorative. When true, removes it from the accessibility tree. |
| className | string | - | Additional CSS classes. |
Accessibility
- Built on Radix UI Separator
- Uses proper ARIA role="separator"
- Set decorative=false for semantic separators
- Decorative separators are hidden from screen readers