eoria
Component

Separator

Horizontal or vertical rule, decorative by default.

Separator rendered on iOS, light mode
Separator rendered on iOS, dark mode
iPhone, zinc preset. Captured from the example app.
Terminal window
npx @eoria/cli add separator

Usage

import { Separator } from '@/components/ui/separator'


<Separator />
<HStack gap={3} style={{ height: 24 }}>
  <Text>Left</Text>
  <Separator orientation="vertical" />
  <Text>Right</Text>
</HStack>

Props

Prop Values Default
orientation horizontal, vertical horizontal
decorative boolean true

Decorative separators are hidden from assistive technology. Set decorative={false} to expose it with the separator role. Inside a row, give it flex: 1 to fill the remaining width.

Source

registry/ui/separator.tsx