GothUI

Layout

Stack

Vertical rhythm with a density-aware gap.

components.Stack · StackProps

A little breathing room.

The stack owns spacing between these children. Its gap follows your page density.

A nested group

Nested stacks choose their own gap.

Use it well.

Owns direct children's block margins. A plain div, not a landmark or list; keep semantic sections and labels in the children. Align defaults to stretch.

Explore the full demo →

This is the source compiled for the preview. Select the text to copy it, or download the file. Change the package name and demo routes for your application.

package examples

import "github.com/Tend-Stack/GothUI/v2026/components"

templ ExampleStack() {
	@components.Stack(components.StackProps{Gap: components.SpaceLarge}) {
		<h3>A little breathing room.</h3>
		<p>The stack owns spacing between these children. Its gap follows your page density.</p>
		@components.Stack(components.StackProps{Gap: components.SpaceSmall}) {
			<strong>A nested group</strong>
			<p>Nested stacks choose their own gap.</p>
		}
	}
}