Separator

Import

import { Separator } from "heroui-native";

Anatomy

<Separator />

Separator: A simple line component that separates content visually. Can be oriented horizontally or vertically, with customizable thickness and variant styles.

Usage

Basic Usage

The Separator component creates a visual separation between content sections.

<Separator />

Orientation

Control the direction of the separator with the orientation prop.

<View>
  <Text>Horizontal separator</Text>
  <Separator orientation="horizontal" />
  <Text>Content below</Text>
</View>

<View className="h-24 flex-row">
  <Text>Left</Text>
  <Separator orientation="vertical" />
  <Text>Right</Text>
</View>

Variants

Choose between thin and thick variants for different visual emphasis.

<Separator variant="thin" />
<Separator variant="thick" />

Custom Thickness

Set a specific thickness value for precise control.

<Separator thickness={1} />
<Separator thickness={5} />
<Separator thickness={10} />

Example

import { Separator, Surface } from "heroui-native";
import { Text, View } from "react-native";

export default function SeparatorExample() {
  return (
    <Surface variant="secondary" className="px-6 py-7">
      <Text className="text-base font-medium text-foreground">
        HeroUI Native
      </Text>
      <Text className="text-sm text-muted">
        A modern React Native component library.
      </Text>
      <Separator className="my-4" />
      <View className="flex-row items-center h-5">
        <Text className="text-sm text-foreground">Components</Text>
        <Separator orientation="vertical" className="mx-3" />
        <Text className="text-sm text-foreground">Themes</Text>
        <Separator orientation="vertical" className="mx-3" />
        <Text className="text-sm text-foreground">Examples</Text>
      </View>
    </Surface>
  );
}

You can find more examples in the GitHub repository.

API Reference

prop	type	default	description
`variant`	`'thin' \| 'thick'`	`'thin'`	Variant style of the separator
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Orientation of the separator
`thickness`	`number`	`undefined`	Custom thickness in pixels. Controls height for horizontal or width for vertical orientation
`className`	`string`	`undefined`	Additional CSS classes to apply
`...ViewProps`	`ViewProps`	-	All standard React Native View props are supported

SeparatorNew