Separator

Visual divider that separates content with an optional label.

TailwindCSS

Top

Bottom

package showcase

import "github.com/axzilla/templui/internal/components/separator"

templ SeparatorDefault() {
	<div class="flex flex-col gap-4 items-center w-full max-w-md">
		<p>Top</p>
		@separator.Separator()
		<p>Bottom</p>
	</div>
}

Installation

templui add separator

Examples

Vertical

Left

Right

package showcase

import "github.com/axzilla/templui/internal/components/separator"

templ SeparatorVertical() {
	<div class="w-full max-w-md">
		<div class="flex h-24 items-center">
			<div class="w-1/2 text-center">Left</div>
			@separator.Separator(separator.Props{
				Orientation: separator.OrientationVertical,
				Class:       "mx-4",
			})
			<div class="w-1/2 text-center">Right</div>
		</div>
	</div>
}

With Label

package showcase

import "github.com/axzilla/templui/internal/components/separator"

templ SeparatorLabel() {
	<div class="flex flex-col gap-16 w-full max-w-md items-center">
		@separator.Separator(separator.Props{
			Class: "w-full",
		}) {
			OR
		}
		@separator.Separator(separator.Props{
			Class:       "h-24",
			Orientation: separator.OrientationVertical,
		}) {
			OR
		}
	</div>
}

Decorated

DASHED

DOTTED

package showcase

import "github.com/axzilla/templui/internal/components/separator"

templ SeparatorDecorated() {
	<div class="flex flex-col gap-16 w-full max-w-md">
		@separator.Separator(separator.Props{
			Decoration: separator.DecorationDashed,
		}) {
			DASHED
		}
		@separator.Separator(separator.Props{
			Decoration: separator.DecorationDotted,
		}) {
			DOTTED
		}
	</div>
}

API Reference

Required parameter

Hover for description

Separator

Visual divider component for separating content sections with optional labeling.

Name	Type	Default
`ID` Unique identifier for the separator element.	`string`	-
`Class` Additional CSS classes to apply to the separator.	`string`	-
`Attributes` Additional HTML attributes to apply to the separator element.	`templ.Attributes`	-
`Orientation` Orientation of the separator. Options: 'horizontal', 'vertical'.	`Orientation`	`horizontal`
`Decoration` Decoration style for the separator. Options: 'none', 'dashed', 'dotted'.	`Decoration`	`none`

Getting Started

Components

Separator

Installation

Examples

API Reference

Separator