Top
Bottom
package showcase
import "github.com/templui/templui/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 separatorimport "github.com/templui/templui/components/separator"Examples
Vertical
Left
Right
package showcase
import "github.com/templui/templui/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/templui/templui/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/templui/templui/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 |
|---|---|---|
Unique identifier for the separator element. | | - |
Additional CSS classes to apply to the separator. | | - |
Additional HTML attributes to apply to the separator element. | | - |
Orientation of the separator. Options: 'horizontal', 'vertical'. | | |
Decoration style for the separator. Options: 'none', 'dashed', 'dotted'. | | |
