Separator

Separator is the React Native implementation shipped by the native-separator registry item. The component adapts the registry's web-facing composition to native primitives and touch-based interaction.

The native Separator is a lightweight visual divider. It supports both horizontal and vertical orientations and uses the project's border color token.

Unlike an interactive component, the separator has no internal state and simply renders a styled native View.

See the shadcn/ui Separator documentation for the web component API, concepts, and additional examples.

InstallationCopy Anchor Link

CLICopy Anchor Link

npx shadcn add https://ui.tiesen.id.vn/r/native-separator.json

ManualCopy Anchor Link

Copy and paste the following code into your project.

import { View } from 'react-native'import { cn } from '@/lib/utils'function Separator({  className,  orientation = 'horizontal',  ...props}: React.ComponentProps<typeof View> & {  orientation?: 'horizontal' | 'vertical'}) {  return (    <View      data-slot='separator'      className={cn(        'shrink-0 bg-border',        orientation === 'horizontal' && 'h-px w-full',        orientation === 'vertical' && 'w-px self-stretch',        className      )}      {...props}    />  )}export { Separator }

FeaturesCopy Anchor Link

• Horizontal and vertical orientations.
• Minimal native View implementation.
• Works with arbitrary layout containers.
• Supports custom classes and native view props.

UsageCopy Anchor Link

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

export function SeparatorExample() {
  return (
    <>
      <View className='gap-4'>
        <Text>Account</Text>
        <Separator />
        <Text>Preferences</Text>
      </View>
    </>
  )
}

HorizontalCopy Anchor Link

The default orientation fills the available width.

<Separator />

VerticalCopy Anchor Link

Use orientation='vertical' inside a row to create a vertical divider.

<View className='h-6 flex-row items-center'>
  <Text>Profile</Text>
  <Separator orientation='vertical' />
  <Text>Settings</Text>
</View>

API ReferenceCopy Anchor Link

SeparatorCopy Anchor Link

Horizontal separators render with h-px w-full; vertical separators render with w-px self-stretch.