Skip to content
v0.4.0

Component Page

A component reference page with previews, code samples, variants, and usage notes.

Page header Rendered example

Deployments

View deployments and create a new one.

Preview Show the component as it appears in your application.
Source Place copyable Go and templ code beside the preview.
Guidance Explain when to use the component and which options to set.
Usage Example 
@componentpage.Page(componentpage.Config{
    Title:       "Button",
    Description: "Trigger an action with a clear accessible label.",
    Primary: componentpage.Example{
        PreviewLabel: "Default",
        Preview:      button.Button(),
        Code:         "@button.Button() { Continue }",
    },
})

Disabled state

Add a section for each state readers need to see, such as a disabled button.

Disabled state Rendered example

Button

The Continue button is disabled.

Each example accepts a description, preview, code sample, and heading anchor.

Disabled state 
Sections: []componentpage.Example{{
    Title:       "Disabled",
    Description: "Disable the button when the action is unavailable.",
    Preview:     button.Button(button.Disabled()),
    Code:        "@button.Button(button.Disabled()) { Continue }",
}}

Install and use

Install 
go get github.com/araihu/goshtoso-app-shells/[email protected]

componentpage renders content inside a document shell. Load the runtime scripts and mount the asset handlers in that shell.

What you provide

Pass your previews, code samples, descriptions, and controls to the frame. It arranges them into sections with labels, spacing, and formatted code.