Divider

Import

import { Divider } from 'heroui-native';

Anatomy

<Divider />

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

Usage

Basic Usage

The Divider component creates a visual separation between content sections.

<Divider />

Orientation

Control the direction of the divider with the orientation prop.

<View>
  <Text>Horizontal divider</Text>
  <Divider orientation="horizontal" />
  <Text>Content below</Text>
</View>

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

Variants

Choose between thin and thick variants for different visual emphasis.

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

Custom Thickness

Set a specific thickness value for precise control.

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

Example

import { Divider, Surface } from 'heroui-native';
import { Text, View } from 'react-native';

export default function DividerExample() {
  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>
      <Divider className="my-4" />
      <View className="flex-row items-center h-5">
        <Text className="text-sm text-foreground">Components</Text>
        <Divider orientation="vertical" className="mx-3" />
        <Text className="text-sm text-foreground">Themes</Text>
        <Divider orientation="vertical" className="mx-3" />
        <Text className="text-sm text-foreground">Examples</Text>
      </View>
    </Surface>
  );
}

API Reference

prop	type	default	description
`variant`	`'thin' \| 'thick'`	`'thin'`	Variant style of the divider
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Orientation of the divider
`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

Divider

On this page