Components · Dividers
Separator
StableSince v0.0.1
A horizontal or vertical visual divider.
import { Separator } from '@nexub/react';Examples
Default
Vertical
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Direction of the separator line. |
| decorative | boolean | true | When true, the separator is hidden from the accessibility tree. |
On iOS & Android: Divider
@nexub/react-nativeAlpha
import { Divider } from '@nexub/react-native';
<Divider inset={56} />Web vs mobile
Same tokens and prop names. Where the platforms differ:
| Web | iOS & Android | |
|---|---|---|
| Name and inset | Separator. | Divider with inset to align with list text. |
Interactive preview of @nexub/react-native rendered for the web. Native chrome (switches, pickers, Liquid Glass) looks like the platform on a device.
On device
iPhone (iOS simulator)
Pixel (Android emulator)
Screenshots from the latest CI run of the showcase app; the live frame renders the same code for the web.
Divider props
| Prop | Type | Default | Description |
|---|---|---|---|
| inset | number | 0 | Indent from the start edge (aligns with list text after a leading icon). |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | — |