# Separator: Vertical

> With `orientation="vertical"` the line stretches to the height of its flex row. Outside a flex row, give it a height.

Example: https://hextaui.com/docs/separator/examples/vertical
Component docs: https://hextaui.com/docs/separator.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/separator-vertical.json
```

This adds `components/examples/separator/vertical.tsx` with the Separator component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/separator/vertical.tsx"
import { Separator } from "@/components/ui/separator"

export function SeparatorVertical() {
  return (
    <div className="flex items-center gap-4 text-sm">
      <div className="flex flex-col">
        <span className="font-medium tabular-nums">2,481</span>
        <span className="text-muted-foreground">Stars</span>
      </div>
      <Separator orientation="vertical" />
      <div className="flex flex-col">
        <span className="font-medium tabular-nums">164</span>
        <span className="text-muted-foreground">Forks</span>
      </div>
      <Separator orientation="vertical" />
      <div className="flex flex-col">
        <span className="font-medium tabular-nums">38</span>
        <span className="text-muted-foreground">Contributors</span>
      </div>
    </div>
  )
}
```

## Props in this example

### Separator

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` |  |

## More Separator examples

- [Label](https://hextaui.com/docs/separator/examples/label.md)
- [Align](https://hextaui.com/docs/separator/examples/align.md)
- [Vertical label](https://hextaui.com/docs/separator/examples/vertical-label.md)
- [Decorative](https://hextaui.com/docs/separator/examples/decorative.md)
- [Inline](https://hextaui.com/docs/separator/examples/render.md)
- [Long content](https://hextaui.com/docs/separator/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/separator/examples/rtl.md)