# Separator

> Visual divider, horizontal or vertical.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/separator.json`

## Install

```tsx
import { Separator } from "@aspyn-io/kit";
```

### Horizontal

```tsx
<div>
  <p className="text-sm font-medium">Aspyn Kit</p>
  <p className="text-sm text-muted-foreground">Design system primitives.</p>
</div>
<Separator className="my-4" />
<div className="text-sm">Next section…</div>
```

### Vertical

```tsx
<div className="flex h-5 items-center gap-4 text-sm">
  <span>Docs</span>
  <Separator orientation="vertical" />
  <span>Components</span>
  <Separator orientation="vertical" />
  <span>Examples</span>
</div>
```

### In a menu / list

Horizontal separators divide rows in a settings list or menu without a heavy border on each item.

```tsx
<div className="rounded-md border">
  <div className="px-3 py-2 text-sm">Profile</div>
  <Separator />
  <div className="px-3 py-2 text-sm">Notifications</div>
  <Separator />
  <div className="px-3 py-2 text-sm">Billing</div>
</div>
```