Working with Goshtoso Components

A common renderable interface

Every public component value implements components.Component. The interface embeds templ.Component and adds stable component identity through Kind().

type Component interface {
    templ.Component
    Kind() Kind
}

Render returned values normally in templ. Keep the concrete return value when code uses component-specific behavior; use the common interface when a collection contains different components.

Constructor styles

There is no shared configuration type. Each package exposes only the fields or options supported by that component. The versioned pkg.go.dev link on every component page is the source of truth for exact constructor signatures.

badge.Badge(badge.Config{
    Label:      "Requires attention",
    Tone:       badge.ToneDanger,
    Appearance: badge.AppearanceSoft,
    Size:       badge.SizeSM,
})

button.Button(
    button.WithTone(button.TonePrimary),
    button.WithSize(button.SizeSmall),
    button.WithType("submit"),
)

Concrete return values

Constructors return exported values such as button.Instance, modal.AlertDialogInstance, and table.Instance. They still satisfy both common renderable interfaces.

saveButton := button.Button(button.WithType("submit"))

var component components.Component = saveButton
var renderable templ.Component = saveButton

Use Kind in generic Go code

A []components.Component can contain values from different packages. Call component.Kind() when a registry, diagnostic, or switch needs the stable identity of a component.

for _, component := range pageComponents {
    switch component.Kind() {
    case components.KindAlertDialog:
        // Alert-dialog orchestration.
    case components.KindTable:
        // Table orchestration.
    }
}

Kind values are stable kebab-case identifiers. They are not CSS classes or HTML element names.

Rendered defaults

A zero-valued field may render a documented default. Component pages demonstrate the rendered behavior; their versioned pkg.go.dev links document exported constructors, fields, options, and methods.

For examples, compare the Button API with the config-heavy Table API.

Related guides