---
title: "Separator"
description: "A hairline between two groups of content: sections of a card, or groups of buttons in a toolbar. A vertical separator stretches to the height of its row."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Separator

## Horizontal

```tsx
import { Separator } from '@arbol-ai/ui';

<div className="max-w-sm text-sm">
  <p className="font-medium">Clínica Norte</p>
  <p className="text-muted-foreground">Calle 93 #11-27, Bogotá</p>
  <Separator className="my-3" />
  <p className="text-muted-foreground">Open Monday to Friday, 7:00 to 18:00</p>
</div>
```

## Vertical

```tsx
import { Button, Separator } from '@arbol-ai/ui';

<div className="flex items-center gap-2">
  <Button size="sm" variant="ghost">
    Archive
  </Button>
  <Button size="sm" variant="ghost">
    Assign
  </Button>
  <Separator orientation="vertical" />
  <Button size="sm" variant="ghost">
    Export
  </Button>
</div>
```

## Source

The examples above are [`src/components/separator/separator.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/separator/separator.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/layout/separator/index.mdx