Separator

Horizontal or vertical rule.

Installation

Terminal

npx magic-native-ui@latest add separator

Usage

The example running in the preview above. Imports use the default aliases from components.json.

separator-demo.tsx

import { View } from 'react-native'

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

export function SeparatorDemo() {
  return (
    <View className="w-full gap-3">
      <Text>Above</Text>
      <Separator />
      <Text>Below</Text>
    </View>
  )
}

Component source

What the CLI copies into your project. Once it is there, the code is yours to edit.

registry/ui/separator.tsx

import { View } from 'react-native'

import { cn } from '@/registry/lib/utils'

type SeparatorProps = React.ComponentProps<typeof View> & {
  orientation?: 'horizontal' | 'vertical'
  /** A purely visual rule, hidden from assistive technology. */
  decorative?: boolean
}

function Separator({
  className,
  orientation = 'horizontal',
  decorative = true,
  ...props
}: SeparatorProps) {
  return (
    <View
      role={decorative ? 'presentation' : 'separator'}
      aria-hidden={decorative}
      className={cn(
        'shrink-0 bg-border',
        orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
        className
      )}
      {...props}
    />
  )
}

export { Separator }
export type { SeparatorProps }