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 separatorCopy and paste the following code into your project:
package separator import "github.com/axzilla/templui/internal/utils" type Orientation string type Decoration string const ( OrientationHorizontal Orientation = "horizontal" OrientationVertical Orientation = "vertical" ) const ( DecorationDashed Decoration = "dashed" DecorationDotted Decoration = "dotted" ) type Props struct { ID string Class string Attributes templ.Attributes Orientation Orientation Decoration Decoration } templ Separator(props ...Props) { {{ var p Props }} if len(props) > 0 { {{ p = props[0] }} } if p.Orientation == "" { {{ p.Orientation = OrientationHorizontal }} } if p.Orientation == OrientationHorizontal { <div if p.ID != "" { id={ p.ID } } role="separator" aria-orientation="horizontal" class={ utils.TwMerge("shrink-0 w-full", p.Class) } { p.Attributes... } > <div class="relative flex items-center w-full"> <span class={ utils.TwMerge( "absolute w-full border-t h-[1px]", decorationClasses(p.Decoration), ), } aria-hidden="true" ></span> <span class="relative mx-auto bg-background px-2 text-xs text-muted-foreground"> { children... } </span> </div> </div> } else { <div if p.ID != "" { id={ p.ID } } role="separator" aria-orientation="vertical" class={ utils.TwMerge("shrink-0 h-full", p.Class) } { p.Attributes... } > <div class="relative flex flex-col items-center h-full"> <span class={ utils.TwMerge( "absolute h-full border-l w-[1px]", decorationClasses(p.Decoration), ), } aria-hidden="true" ></span> <span class="relative my-auto bg-background py-2 text-xs text-muted-foreground"> { children... } </span> </div> </div> } } func decorationClasses(decoration Decoration) string { switch decoration { case DecorationDashed: return "border-dashed" case DecorationDotted: return "border-dotted" default: return "" } }Update the import paths to match your project setup.
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
OR
OR
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>
}