# Source: https://tamagui.dev/ui/separator.md

---
title: Separator
description: Create borders between components.
name: separator
component: Separator
package: separator
demoName: Separator
---

<HeroContainer>
  <SeparatorDemo />
</HeroContainer>

```tsx hero template=Separator

```

<Highlights features={[`Supports horizontal and vertical orientation.`]} />

## Installation

Separator is already installed in `tamagui`, or you can install it independently:

```bash
npm install @tamagui/separator
```

## Usage

Separator uses the `borderWidth` and `borderColor` attribute for its style, so be sure to override those when extending it.

```tsx
export default () => (
  <XStack alignItems="center">
    <Paragraph>Blog</Paragraph>
    <Separator alignSelf="stretch" vertical />
    <Paragraph>Docs</Paragraph>
    <Separator alignSelf="stretch" vertical />
    <Paragraph>Source</Paragraph>
  </XStack>
)

```

## API Reference

### Separator props

Separators extend Stack views inheriting all the [Tamagui standard props](/docs/intro/props), plus:

<PropsTable
  data={[
    {
      name: 'vertical',
      required: false,
      type: 'boolean',
      description: `Show vertical separator.`,
    },
  ]}
/>