T templcn/ui
Componentseparator

Separator

Visually or semantically separates content.

Preview

Visually or semantically separates content.

templcn/ui

An open-source UI component library.

BlogDocsSource

Installation

Add this component to your project using the CLI.

templcn add separator

Usage

1. Import the component in your Go or templ file:

import "your-module/ui"

2. Use the component in your template:

<div>
  <div class="space-y-1">
    <h4 class="text-sm font-medium leading-none">Radix Primitives</h4>
    <p class="text-sm text-muted-foreground">An open-source UI component library.</p>
  </div>
  @ui.Separator(ui.SeparatorProps{DOMProps: ui.DOMProps{Class: "my-4"}})
  <div class="flex h-5 items-center space-x-4 text-sm">
    <div>Blog</div>
    @ui.Separator(ui.SeparatorProps{Orientation: ui.SeparatorOrientationVertical})
    <div>Docs</div>
    @ui.Separator(ui.SeparatorProps{Orientation: ui.SeparatorOrientationVertical})
    <div>Source</div>
  </div>
</div>

Composition

Use these parts together to build the component.

Separator

Examples

Named examples and common variations.

Default

Horizontal and vertical separators.

templcn/ui

An open-source UI component library.

BlogDocsSource
API Reference
PropTypeDefaultDescription
OrientationSeparatorOrientation"horizontal""horizontal" or "vertical".
DecorativeboolfalseWhen true, adds aria-hidden instead of role=separator.
View source
package ui

import (
	"context"
	"io"

	"github.com/a-h/templ"
)

type SeparatorOrientation string

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

type SeparatorProps struct {
	DOMProps
	Orientation SeparatorOrientation
	Decorative  bool
}

func Separator(props SeparatorProps) templ.Component {
	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
		orientation := props.Orientation
		if orientation == "" {
			orientation = SeparatorOrientationHorizontal
		}

		className := "shrink-0 bg-border"
		if orientation == SeparatorOrientationHorizontal {
			className = cn(className, "data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full")
		} else {
			className = cn(className, "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px")
		}

		attrs := attrsFromDOMProps(props.DOMProps, "separator", className)
		attrs["data-orientation"] = orientation
		if !props.Decorative {
			attrs["role"] = "separator"
		} else {
			attrs["aria-hidden"] = "true"
		}
		return renderVoidElement(ctx, w, "hr", attrs)
	})
}
Next: Sheet