# Separator

> Visually or semantically separates content.

**BNA UI** — a React Native / Expo component library.
These components render through `react-native`, not the DOM: there are no HTML
elements, no Tailwind classes and no Radix primitives. Source is copied into your
project and imported through `@/components/ui/*`, `@/components/charts/*`,
`@/hooks/*` and `@/theme/*`. Colours come from the `useColor` hook rather than
hardcoded hex; sizing tokens (`HEIGHT`, `FONT_SIZE`, `BORDER_RADIUS`, `CORNERS`)
come from `@/theme/globals`.

- Docs: https://ui.ahmedbna.com/docs/components/separator
- Markdown: https://ui.ahmedbna.com/docs/components/separator.md
- Structured JSON (props, usage, source, examples): https://ui.ahmedbna.com/r/ai/separator.json
- Install payload (source plus every file it imports): https://ui.ahmedbna.com/r/separator.json
- Install: `npx bna-ui add separator`
- Registry dependencies: `mode-provider`, `useColorScheme`, `colors`, `useColor`, `view`
- Preview recording: https://demo.ahmedbna.com/0255-separator-demo.PNG

---

**Example:** A basic horizontal separator

```tsx
// components/demo/separator/separator-demo.tsx
import { Separator } from '@/components/ui/separator';
import { Text } from '@/components/ui/text';
import { View } from '@/components/ui/view';
import React from 'react';

export function SeparatorDemo() {
  return (
    <View style={{ padding: 16 }}>
      <Text variant='body'>Above separator</Text>
      <Separator style={{ marginVertical: 16 }} />
      <Text variant='body'>Below separator</Text>
    </View>
  );
}
```

## Installation

### CLI

```bash
npx bna-ui add separator
```

### Manual

**1.** Copy and paste the following code into your project.

```tsx
// components/ui/separator.tsx
import { View } from '@/components/ui/view';
import { useColor } from '@/hooks/useColor';
import React from 'react';
import { ViewStyle } from 'react-native';

interface SeparatorProps {
  orientation?: 'horizontal' | 'vertical';
  style?: ViewStyle;
}

export function Separator({
  orientation = 'horizontal',
  style,
}: SeparatorProps) {
  const borderColor = useColor('border');

  return (
    <View
      accessibilityElementsHidden
      importantForAccessibility='no-hide-descendants'
      style={[
        {
          backgroundColor: borderColor,
          ...(orientation === 'horizontal'
            ? { height: 1, width: '100%' }
            : { width: 1, height: '100%' }),
        },
        style,
      ]}
    />
  );
}
```

**2.** Update the import paths to match your project setup.

## Usage

```tsx
import { Separator } from '@/components/ui/separator';
```

```tsx
<Separator />
```

## Examples

#### Default

**Example:** A basic horizontal separator

```tsx
// components/demo/separator/separator-demo.tsx
import { Separator } from '@/components/ui/separator';
import { Text } from '@/components/ui/text';
import { View } from '@/components/ui/view';
import React from 'react';

export function SeparatorDemo() {
  return (
    <View style={{ padding: 16 }}>
      <Text variant='body'>Above separator</Text>
      <Separator style={{ marginVertical: 16 }} />
      <Text variant='body'>Below separator</Text>
    </View>
  );
}
```

#### Vertical

**Example:** A vertical separator for inline content

```tsx
// components/demo/separator/separator-vertical.tsx
import { Separator } from '@/components/ui/separator';
import { Text } from '@/components/ui/text';
import { View } from '@/components/ui/view';
import React from 'react';

export function SeparatorVertical() {
  return (
    <View
      style={{
        flexDirection: 'row',
        alignItems: 'center',
        padding: 16,
        height: 60,
      }}
    >
      <Text variant='body'>Left content</Text>
      <Separator orientation='vertical' style={{ marginHorizontal: 16 }} />
      <Text variant='body'>Right content</Text>
    </View>
  );
}
```

#### Custom Thickness

**Example:** Separators with different thickness values

```tsx
// components/demo/separator/separator-thickness.tsx
import { Separator } from '@/components/ui/separator';
import { Text } from '@/components/ui/text';
import { View } from '@/components/ui/view';
import React from 'react';

export function SeparatorThickness() {
  return (
    <View style={{ padding: 16 }}>
      <Text variant='caption' style={{ marginBottom: 8 }}>
        Thin (1px)
      </Text>
      <Separator style={{ height: 1, marginBottom: 16 }} />

      <Text variant='caption' style={{ marginBottom: 8 }}>
        Medium (2px)
      </Text>
      <Separator style={{ height: 2, marginBottom: 16 }} />

      <Text variant='caption' style={{ marginBottom: 8 }}>
        Thick (4px)
      </Text>
      <Separator style={{ height: 4, marginBottom: 16 }} />

      <Text variant='caption' style={{ marginBottom: 8 }}>
        Extra thick (8px)
      </Text>
      <Separator style={{ height: 8 }} />
    </View>
  );
}
```

#### Custom Colors

**Example:** Separators with custom colors and opacity

```tsx
// components/demo/separator/separator-colors.tsx
import { Separator } from '@/components/ui/separator';
import { Text } from '@/components/ui/text';
import { View } from '@/components/ui/view';
import React from 'react';

export function SeparatorColors() {
  return (
    <View style={{ padding: 16 }}>
      <Text variant='caption' style={{ marginBottom: 8 }}>
        Default
      </Text>
      <Separator style={{ marginBottom: 16 }} />

      <Text variant='caption' style={{ marginBottom: 8 }}>
        Red
      </Text>
      <Separator style={{ backgroundColor: '#ef4444', marginBottom: 16 }} />

      <Text variant='caption' style={{ marginBottom: 8 }}>
        Blue
      </Text>
      <Separator style={{ backgroundColor: '#3b82f6', marginBottom: 16 }} />

      <Text variant='caption' style={{ marginBottom: 8 }}>
        Green
      </Text>
      <Separator style={{ backgroundColor: '#10b981', marginBottom: 16 }} />

      <Text variant='caption' style={{ marginBottom: 8 }}>
        Semi-transparent
      </Text>
      <Separator style={{ backgroundColor: 'rgba(0, 0, 0, 0.2)' }} />
    </View>
  );
}
```

#### Spacing Variants

**Example:** Separators with different margin and padding

```tsx
// components/demo/separator/separator-spacing.tsx
import { Separator } from '@/components/ui/separator';
import { Text } from '@/components/ui/text';
import { View } from '@/components/ui/view';
import React from 'react';

export function SeparatorSpacing() {
  return (
    <View style={{ padding: 16 }}>
      <Text variant='body'>Tight spacing</Text>
      <Separator style={{ marginVertical: 4 }} />
      <Text variant='body'>Content with minimal spacing</Text>

      <Separator style={{ marginVertical: 12 }} />

      <Text variant='body'>Normal spacing</Text>
      <Separator style={{ marginVertical: 16 }} />
      <Text variant='body'>Standard content spacing</Text>

      <Separator style={{ marginVertical: 12 }} />

      <Text variant='body'>Loose spacing</Text>
      <Separator style={{ marginVertical: 24 }} />
      <Text variant='body'>Generous content spacing</Text>
    </View>
  );
}
```

## API Reference

### Separator

A component that creates visual separation between content elements.

| Prop          | Type                         | Default        | Description                                  |
| ------------- | ---------------------------- | -------------- | -------------------------------------------- |
| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | The orientation of the separator.            |
| `style`       | `ViewStyle`                  | -              | Additional styles to apply to the separator. |

## Accessibility

The Separator component is built with accessibility in mind:

- Uses appropriate semantic structure for screen readers
- Provides visual separation that maintains proper contrast ratios
- Works well with keyboard navigation flows
- Respects system accessibility settings for reduced motion