Separator

The Separator component renders a thin line to visually divide content. It supports both horizontal and vertical orientations and can be set as decorative or semantically meaningful for accessibility.

Preview

NovaUI

An open-source UI component library.

Blog

Docs

Source

Installation

npx novaui-cli add separator

Import

import { Separator } from 'novaui-components'

Basic Usage

By default, the Separator renders a horizontal line:

import { Separator } from 'novaui-components'

export function BasicSeparator() {
  return <Separator />
}

Orientation

Horizontal

The default orientation, spanning the full width:

Content above

Content below

import { View, Text } from 'react-native'
import { Separator } from 'novaui-components'

export function HorizontalSeparator() {
  return (
    <View className="gap-3">
      <Text>Content above</Text>
      <Separator orientation="horizontal" />
      <Text>Content below</Text>
    </View>
  )
}

Vertical

A vertical separator for side-by-side content:

Item 1

Item 2

Item 3

import { View, Text } from 'react-native'
import { Separator } from 'novaui-components'

export function VerticalSeparator() {
  return (
    <View className="flex-row h-5 items-center gap-4">
      <Text>Item 1</Text>
      <Separator orientation="vertical" />
      <Text>Item 2</Text>
      <Separator orientation="vertical" />
      <Text>Item 3</Text>
    </View>
  )
}

With Content Sections

Use Separator to divide content within a card or layout:

Settings

Manage your account settings.

Notifications

Configure your notification preferences.

Privacy

Control your privacy settings.

import { View, Text } from 'react-native'
import { Separator } from 'novaui-components'

export function SectionedContent() {
  return (
    <View className="rounded-lg border border-border p-4">
      <View className="gap-1">
        <Text className="text-sm font-medium text-foreground">Settings</Text>
        <Text className="text-sm text-muted-foreground">Manage your account settings.</Text>
      </View>
      <Separator className="my-4" />
      <View className="gap-1">
        <Text className="text-sm font-medium text-foreground">Notifications</Text>
        <Text className="text-sm text-muted-foreground">Configure your notification preferences.</Text>
      </View>
      <Separator className="my-4" />
      <View className="gap-1">
        <Text className="text-sm font-medium text-foreground">Privacy</Text>
        <Text className="text-sm text-muted-foreground">Control your privacy settings.</Text>
      </View>
    </View>
  )
}

Props API

SeparatorProps

Extends React.ComponentPropsWithoutRef<typeof View> and includes:

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	The direction of the separator line
`decorative`	`boolean`	`true`	When true, sets `role="none"` for screen readers. Set to false when the separator has semantic meaning
`className`	`string`	-	Additional CSS classes for custom styling

Best Practices

Use sparingly: Don't overuse separators — whitespace and layout grouping are often enough to divide content.
Decorative vs semantic: Keep decorative={true} (the default) for purely visual dividers. Set it to false when the separator represents a meaningful boundary between content sections.
Vertical separators: When using vertical separators, ensure the parent container has a defined height (e.g., h-5) so the separator can render properly.
Consistent spacing: Apply consistent margin or gap around separators for visual rhythm.

Use Separator within Card to divide card sections
Combine with navigation items for menu dividers
Pair with DropdownMenu or ContextMenu for item group separation

Continue reading

Getting Started Components Overview Popular: Dialog SEO Playbook