sheengemologic ui
All components

Separator

A structural divider with native separator semantics and an explicit decorative mode.@gemologic/sheen · surfaces

Playground

First section
Second section
<Stack><Text>First section</Text><Separator  decorative={false} orientation="horizontal"/><Text>Second section</Text></Stack>

Variant matrix

Separator composition
First section
Second section
orientation: horizontal
First section
Second section
orientation: vertical
First section
Second section

Anatomy

Package
@gemologic/sheen
Source
packages/ui/src/primitives/Separator.tsx
Tokens
  • --sheen-color-bg-raised
  • --sheen-color-border
  • --sheen-color-focus-ring-offset

Accessibility

Role: separator unless decorativeKeyboard: No component-owned keys

Do

  • Use role tokens and preserve the surrounding keyboard order.

Do not

  • Do not add structural borders or shadows merely as decoration.

Generated props

NameTypeDefaultDescription
orientation"horizontal" | "vertical"horizontalHorizontal or vertical separation. Vertical separators stretch within a constrained flex or grid row.
decorativebooleanfalseHide a purely visual divider from assistive technology.
Native Solid/HTML attributes remain available and are omitted from this authored-prop view.