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

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/separator"

templ SeparatorDemo() {
	<div class="flex max-w-sm flex-col gap-4 text-sm">
		<div class="flex flex-col gap-1.5">
			<div class="leading-none font-medium">shadcn-templ</div>
			<div class="text-muted-foreground">
				The UI Kit for templ
			</div>
		</div>
		@separator.Separator()
		<div>
			A set of beautifully designed components that you can customize, extend, and build on.
		</div>
	</div>
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
shadcn-templ add separator
```

</TabsContent>

<TabsContent value="manual">

<Steps className="mb-0 pt-2">

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="separator" title="components/separator/separator.templ" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```go showLineNumbers
import "github.com/axadrn/shadcn-templ/v2/components/separator"
```

```templ showLineNumbers
@separator.Separator()
```

## Vertical

Use `Orientation: separator.OrientationVertical` for a vertical separator.

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/separator"

templ SeparatorVertical() {
	<div class="flex h-5 items-center gap-4 text-sm">
		<div>Blog</div>
		@separator.Separator(separator.Props{Orientation: separator.OrientationVertical})
		<div>Docs</div>
		@separator.Separator(separator.Props{Orientation: separator.OrientationVertical})
		<div>Source</div>
	</div>
}
```

## Menu

Vertical separators between menu items with descriptions.

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/separator"

templ SeparatorMenu() {
	<div class="flex items-center gap-2 text-sm md:gap-4">
		<div class="flex flex-col gap-1">
			<span class="font-medium">Settings</span>
			<span class="text-xs text-muted-foreground">
				Manage preferences
			</span>
		</div>
		@separator.Separator(separator.Props{Orientation: separator.OrientationVertical})
		<div class="flex flex-col gap-1">
			<span class="font-medium">Account</span>
			<span class="text-xs text-muted-foreground">
				Profile & security
			</span>
		</div>
		@separator.Separator(separator.Props{Orientation: separator.OrientationVertical, Class: "hidden md:block"})
		<div class="hidden flex-col gap-1 md:flex">
			<span class="font-medium">Help</span>
			<span class="text-xs text-muted-foreground">Support & docs</span>
		</div>
	</div>
}
```

## List

Horizontal separators between list items.

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/separator"

templ SeparatorList() {
	<div class="flex w-full max-w-sm flex-col gap-2 text-sm">
		<dl class="flex items-center justify-between">
			<dt>Item 1</dt>
			<dd class="text-muted-foreground">Value 1</dd>
		</dl>
		@separator.Separator()
		<dl class="flex items-center justify-between">
			<dt>Item 2</dt>
			<dd class="text-muted-foreground">Value 2</dd>
		</dl>
		@separator.Separator()
		<dl class="flex items-center justify-between">
			<dt>Item 3</dt>
			<dd class="text-muted-foreground">Value 3</dd>
		</dl>
	</div>
}
```

## API Reference

### Separator

The `Separator` component renders a semantic divider.

| Prop          | Type                                             | Default                 |
| ------------- | ------------------------------------------------ | ----------------------- |
| `Orientation` | `OrientationHorizontal \| OrientationVertical`   | `OrientationHorizontal` |
| `Class`       | `string`                                         | -                       |