# Separator **Category**: native **URL**: https://www.blakeui.com/en/docs/native/components/separator **Source**: https://raw.githubusercontent.com/myblakebox/BlakeUI/refs/heads/main/apps/docs/content/docs/en/native/components/(layout)/separator.mdx > A simple line to separate content visually. *** ## Import ```tsx import { Separator } from "@blakeui/native"; ``` ## Anatomy ```tsx ``` - **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. ```tsx ``` ### Orientation Control the direction of the separator with the `orientation` prop. ```tsx Horizontal separator Content below Left Right ``` ### Variants Choose between thin and thick variants for different visual emphasis. ```tsx ``` ### Custom Thickness Set a specific thickness value for precise control. ```tsx ``` ## Example ```tsx import { Separator, Surface } from '@blakeui/native'; import { Text, View } from 'react-native'; export default function SeparatorExample() { return ( BlakeUI Native A modern React Native component library. Components Themes Examples ); } ``` You can find more examples in the [GitHub repository](https://github.com/myblakebox/BlakeUI/blob/main/example/src/app/(home)/components/separator.tsx). ## API Reference ### Separator | 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 |