Separator

Visually or semantically separates content.

shadcn-templ

The UI Kit for templ

A set of beautifully designed components that you can customize, extend, and build on.

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

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

shadcn-templ add separator

Copy and paste the following code into your project.

components/separator/separator.templ

package separator import "github.com/axadrn/shadcn-templ/v2/utils" type Orientation string const (	OrientationHorizontal Orientation = "horizontal"	OrientationVertical   Orientation = "vertical") type Props struct {	ID          string	Class       string	Attributes  templ.Attributes	Orientation Orientation} // Base UI's Separator renders data-orientation, and that is what the vendored// data-horizontal / data-vertical variants match// (&:where([data-orientation="horizontal"])). Without it the// data-horizontal:h-px in the class string never lands and the separator// renders 0px high.templ Separator(props ...Props) {	{{ var p Props }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.Orientation == "" {		{{ p.Orientation = OrientationHorizontal }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="separator"		data-orientation={ string(p.Orientation) }		data-horizontal?={ p.Orientation == OrientationHorizontal }		data-vertical?={ p.Orientation == OrientationVertical }		role="separator"		aria-orientation={ string(p.Orientation) }		class={			utils.CN(				"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",				p.Class,			),		}		{ p.Attributes... }	></div>}

Update the import paths to match your project setup.

Usage

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

@separator.Separator()

Vertical

Use Orientation: separator.OrientationVertical for a vertical separator.

Blog

Docs

Source

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

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>}

Vertical separators between menu items with descriptions.

Settings Manage preferences

Account Profile & security

Help Support & docs

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

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.

Item 1: Value 1

Item 2: Value 2

Item 3: Value 3

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

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`	-

Select Sheet

On This Page

Installation Usage Vertical Menu List API Reference Separator

Ship your shadcn-templ app with goilerplate

The Go + templ SaaS boilerplate. Auth, payments, UI. Done.

Now $99 instead of $199.