Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Separator
description: Visually or semantically separates content.
---

```astro live props={{ name: 'separator' }}
---
import { Separator } from "@/components/ui/separator"
---

<div class="flex w-full max-w-sm flex-col gap-4">
  <div>
    <h4 class="text-sm font-medium">Horizontal Separator</h4>
    <p class="text-muted-foreground text-sm">Divides sections horizontally</p>
  </div>
  <Separator />
  <div>
    <h4 class="text-sm font-medium">End of content</h4>
  </div>
</div>
```

## Installation

```bash
npx shadcn@latest add @fulldev/separator
```

## Usage

```ts
import { Separator } from "@/components/ui/separator"
```

```astro
<Separator />
<Separator decorative={false} />
```

## Examples

```astro live
---
import { Separator } from "@/components/ui/separator"
---

<div class="flex items-center gap-3 text-sm leading-none">
  <span>Account</span>
  <Separator orientation="vertical" />
  <span>Billing</span>
  <Separator orientation="vertical" />
  <span>Settings</span>
</div>
```

## Notes

- Use `decorative={false}` when the separator conveys structure to assistive
  technology.
- Vertical separators stretch inside flex rows by default.

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/separator) for more information on props.