Hero

Footer SplitPane

Centered

Build faster, ship beautiful

A claymorphism component library for Go + Templ. Beautiful by default, flexible by design.

Left-aligned

Design without limits

Clay utilities and a rich component set let you prototype production-grade UIs in minutes.

Split (text + illustration)

Your next big idea

From idea to deploy — the component library that grows with you.

With Background Gradient

Pass Tailwind gradient classes via Background — they're merged into the section wrapper.

Accelerate your workflow

Dark gradient hero

Works with any Tailwind background — solid, gradient, or pattern.

Usage

// Variant: "centered" | "left" | "split"
@layout.Hero(layout.HeroProps{
    Title:      "Build faster, ship beautiful",
    Subtitle:   "...",
    Variant:    "centered",
    Background: "bg-gradient-to-br from-brand-50 to-purple-50", // any Tailwind bg classes
    Media:      myIllustration(), // used in "split" variant
}) {
    // children → CTA buttons
    @actions.Button(...) { Get Started }
}