Separator

Visual divider that separates content with an optional label.

TailwindCSS

Top

Bottom

package showcase

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

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

package components

import "github.com/axzilla/templui/utils"

type SeparatorOrientation string
type SeparatorDecoration string

const (
	SeparatorOrientationHorizontal SeparatorOrientation = "horizontal"
	SeparatorOrientationVertical   SeparatorOrientation = "vertical"
)

const (
	SeparatorDecorationNone   SeparatorDecoration = "none"
	SeparatorDecorationDashed SeparatorDecoration = "dashed"
	SeparatorDecorationDotted SeparatorDecoration = "dotted"
)

type SeparatorProps struct {
	ID          string
	Class       string
	Attributes  templ.Attributes
	Orientation SeparatorOrientation
	Decoration  SeparatorDecoration
	Label       string
}

templ Separator(props ...SeparatorProps) {
	{{ var p SeparatorProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	if p.Orientation == "" {
		{{ p.Orientation = SeparatorOrientationHorizontal }}
	}
	<div
		if p.ID != "" {
			id={ p.ID }
		}
		role="separator"
		aria-orientation={ string(p.Orientation) }
		class={
			utils.TwMerge(
				"shrink-0",
				utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationHorizontal),
					utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationVertical),
						getOrientationClasses(p.Orientation),
					),
				),
				utils.If(p.Orientation == SeparatorOrientationHorizontal, "h-[1px] w-full"),
				utils.If(p.Orientation == SeparatorOrientationVertical, "h-full w-[1px]"),
				utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationHorizontal),
					utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationVertical),
						getDecorationClasses(p.Decoration),
					),
				),
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		if p.Label != "" && p.Orientation == SeparatorOrientationHorizontal {
			<div class="relative flex items-center w-full">
				<span
					class={
						utils.TwMerge(
							"absolute w-full border-t",
							getDecorationClasses(p.Decoration),
						),
					}
					aria-hidden="true"
				></span>
				<span class="relative mx-auto bg-background px-2 text-xs text-muted-foreground">
					{ p.Label }
				</span>
			</div>
		} else if p.Label != "" && p.Orientation == SeparatorOrientationVertical {
			<div class="relative flex flex-col items-center h-full">
				<span
					class={
						utils.TwMerge(
							"absolute h-full border-l",
							getDecorationClasses(p.Decoration),
						),
					}
					aria-hidden="true"
				></span>
				<span class="relative my-auto bg-background px-2 text-xs text-muted-foreground">
					{ p.Label }
				</span>
			</div>
		}
	</div>
}

func getOrientationClasses(orientation SeparatorOrientation) string {
	if orientation == SeparatorOrientationVertical {
		return "border-l"
	}
	return "border-t"
}

func getDecorationClasses(decoration SeparatorDecoration) string {
	switch decoration {
	case SeparatorDecorationDashed:
		return "border-dashed"
	case SeparatorDecorationDotted:
		return "border-dotted"
	default:
		return ""
	}
}

Usage

@components.Separator(components.SeparatorProps{...})

Examples

Vertical

Left

Right

package showcase

import (
	"github.com/axzilla/templui/components"
)

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>
			@components.Separator(components.SeparatorProps{
				Orientation: components.SeparatorOrientationVertical,
				Class:       "mx-4",
			})
			<div class="w-1/2 text-center">Right</div>
		</div>
	</div>
}

package components

import "github.com/axzilla/templui/utils"

type SeparatorOrientation string
type SeparatorDecoration string

const (
	SeparatorOrientationHorizontal SeparatorOrientation = "horizontal"
	SeparatorOrientationVertical   SeparatorOrientation = "vertical"
)

const (
	SeparatorDecorationNone   SeparatorDecoration = "none"
	SeparatorDecorationDashed SeparatorDecoration = "dashed"
	SeparatorDecorationDotted SeparatorDecoration = "dotted"
)

type SeparatorProps struct {
	ID          string
	Class       string
	Attributes  templ.Attributes
	Orientation SeparatorOrientation
	Decoration  SeparatorDecoration
	Label       string
}

templ Separator(props ...SeparatorProps) {
	{{ var p SeparatorProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	if p.Orientation == "" {
		{{ p.Orientation = SeparatorOrientationHorizontal }}
	}
	<div
		if p.ID != "" {
			id={ p.ID }
		}
		role="separator"
		aria-orientation={ string(p.Orientation) }
		class={
			utils.TwMerge(
				"shrink-0",
				utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationHorizontal),
					utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationVertical),
						getOrientationClasses(p.Orientation),
					),
				),
				utils.If(p.Orientation == SeparatorOrientationHorizontal, "h-[1px] w-full"),
				utils.If(p.Orientation == SeparatorOrientationVertical, "h-full w-[1px]"),
				utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationHorizontal),
					utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationVertical),
						getDecorationClasses(p.Decoration),
					),
				),
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		if p.Label != "" && p.Orientation == SeparatorOrientationHorizontal {
			<div class="relative flex items-center w-full">
				<span
					class={
						utils.TwMerge(
							"absolute w-full border-t",
							getDecorationClasses(p.Decoration),
						),
					}
					aria-hidden="true"
				></span>
				<span class="relative mx-auto bg-background px-2 text-xs text-muted-foreground">
					{ p.Label }
				</span>
			</div>
		} else if p.Label != "" && p.Orientation == SeparatorOrientationVertical {
			<div class="relative flex flex-col items-center h-full">
				<span
					class={
						utils.TwMerge(
							"absolute h-full border-l",
							getDecorationClasses(p.Decoration),
						),
					}
					aria-hidden="true"
				></span>
				<span class="relative my-auto bg-background px-2 text-xs text-muted-foreground">
					{ p.Label }
				</span>
			</div>
		}
	</div>
}

func getOrientationClasses(orientation SeparatorOrientation) string {
	if orientation == SeparatorOrientationVertical {
		return "border-l"
	}
	return "border-t"
}

func getDecorationClasses(decoration SeparatorDecoration) string {
	switch decoration {
	case SeparatorDecorationDashed:
		return "border-dashed"
	case SeparatorDecorationDotted:
		return "border-dotted"
	default:
		return ""
	}
}

Label

package showcase

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

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

package components

import "github.com/axzilla/templui/utils"

type SeparatorOrientation string
type SeparatorDecoration string

const (
	SeparatorOrientationHorizontal SeparatorOrientation = "horizontal"
	SeparatorOrientationVertical   SeparatorOrientation = "vertical"
)

const (
	SeparatorDecorationNone   SeparatorDecoration = "none"
	SeparatorDecorationDashed SeparatorDecoration = "dashed"
	SeparatorDecorationDotted SeparatorDecoration = "dotted"
)

type SeparatorProps struct {
	ID          string
	Class       string
	Attributes  templ.Attributes
	Orientation SeparatorOrientation
	Decoration  SeparatorDecoration
	Label       string
}

templ Separator(props ...SeparatorProps) {
	{{ var p SeparatorProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	if p.Orientation == "" {
		{{ p.Orientation = SeparatorOrientationHorizontal }}
	}
	<div
		if p.ID != "" {
			id={ p.ID }
		}
		role="separator"
		aria-orientation={ string(p.Orientation) }
		class={
			utils.TwMerge(
				"shrink-0",
				utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationHorizontal),
					utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationVertical),
						getOrientationClasses(p.Orientation),
					),
				),
				utils.If(p.Orientation == SeparatorOrientationHorizontal, "h-[1px] w-full"),
				utils.If(p.Orientation == SeparatorOrientationVertical, "h-full w-[1px]"),
				utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationHorizontal),
					utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationVertical),
						getDecorationClasses(p.Decoration),
					),
				),
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		if p.Label != "" && p.Orientation == SeparatorOrientationHorizontal {
			<div class="relative flex items-center w-full">
				<span
					class={
						utils.TwMerge(
							"absolute w-full border-t",
							getDecorationClasses(p.Decoration),
						),
					}
					aria-hidden="true"
				></span>
				<span class="relative mx-auto bg-background px-2 text-xs text-muted-foreground">
					{ p.Label }
				</span>
			</div>
		} else if p.Label != "" && p.Orientation == SeparatorOrientationVertical {
			<div class="relative flex flex-col items-center h-full">
				<span
					class={
						utils.TwMerge(
							"absolute h-full border-l",
							getDecorationClasses(p.Decoration),
						),
					}
					aria-hidden="true"
				></span>
				<span class="relative my-auto bg-background px-2 text-xs text-muted-foreground">
					{ p.Label }
				</span>
			</div>
		}
	</div>
}

func getOrientationClasses(orientation SeparatorOrientation) string {
	if orientation == SeparatorOrientationVertical {
		return "border-l"
	}
	return "border-t"
}

func getDecorationClasses(decoration SeparatorDecoration) string {
	switch decoration {
	case SeparatorDecorationDashed:
		return "border-dashed"
	case SeparatorDecorationDotted:
		return "border-dotted"
	default:
		return ""
	}
}

Decorated

DASHED

DOTTED

package showcase

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

templ SeparatorDecorated() {
	<div class="flex flex-col gap-16 w-full max-w-md">
		@components.Separator(components.SeparatorProps{
			Decoration: components.SeparatorDecorationDashed,
			Label:      "DASHED",
		})
		@components.Separator(components.SeparatorProps{
			Decoration: components.SeparatorDecorationDotted,
			Label:      "DOTTED",
		})
	</div>
}

package components

import "github.com/axzilla/templui/utils"

type SeparatorOrientation string
type SeparatorDecoration string

const (
	SeparatorOrientationHorizontal SeparatorOrientation = "horizontal"
	SeparatorOrientationVertical   SeparatorOrientation = "vertical"
)

const (
	SeparatorDecorationNone   SeparatorDecoration = "none"
	SeparatorDecorationDashed SeparatorDecoration = "dashed"
	SeparatorDecorationDotted SeparatorDecoration = "dotted"
)

type SeparatorProps struct {
	ID          string
	Class       string
	Attributes  templ.Attributes
	Orientation SeparatorOrientation
	Decoration  SeparatorDecoration
	Label       string
}

templ Separator(props ...SeparatorProps) {
	{{ var p SeparatorProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	if p.Orientation == "" {
		{{ p.Orientation = SeparatorOrientationHorizontal }}
	}
	<div
		if p.ID != "" {
			id={ p.ID }
		}
		role="separator"
		aria-orientation={ string(p.Orientation) }
		class={
			utils.TwMerge(
				"shrink-0",
				utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationHorizontal),
					utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationVertical),
						getOrientationClasses(p.Orientation),
					),
				),
				utils.If(p.Orientation == SeparatorOrientationHorizontal, "h-[1px] w-full"),
				utils.If(p.Orientation == SeparatorOrientationVertical, "h-full w-[1px]"),
				utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationHorizontal),
					utils.If(!(p.Label != "" && p.Orientation == SeparatorOrientationVertical),
						getDecorationClasses(p.Decoration),
					),
				),
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		if p.Label != "" && p.Orientation == SeparatorOrientationHorizontal {
			<div class="relative flex items-center w-full">
				<span
					class={
						utils.TwMerge(
							"absolute w-full border-t",
							getDecorationClasses(p.Decoration),
						),
					}
					aria-hidden="true"
				></span>
				<span class="relative mx-auto bg-background px-2 text-xs text-muted-foreground">
					{ p.Label }
				</span>
			</div>
		} else if p.Label != "" && p.Orientation == SeparatorOrientationVertical {
			<div class="relative flex flex-col items-center h-full">
				<span
					class={
						utils.TwMerge(
							"absolute h-full border-l",
							getDecorationClasses(p.Decoration),
						),
					}
					aria-hidden="true"
				></span>
				<span class="relative my-auto bg-background px-2 text-xs text-muted-foreground">
					{ p.Label }
				</span>
			</div>
		}
	</div>
}

func getOrientationClasses(orientation SeparatorOrientation) string {
	if orientation == SeparatorOrientationVertical {
		return "border-l"
	}
	return "border-t"
}

func getDecorationClasses(decoration SeparatorDecoration) string {
	switch decoration {
	case SeparatorDecorationDashed:
		return "border-dashed"
	case SeparatorDecorationDotted:
		return "border-dotted"
	default:
		return ""
	}
}

Getting Started

Components

Separator

Usage

Examples