UI Components CLI - GoKS Documentation

Thegoks uitool is an opinionated component generator. Instead of installing a monolithic runtime npm package, components are written directly into yourcomponents/ui/folder as editable, transparent.goxsource files.

Available Components

button:Primary, secondary, destructive, ghost variants
input:Accessible text input with focus rings
card:Header, title, description, and content sections
dialog:Modal window with backdrop and close events
badge:Success, warning, and destructive status tags
dropdown:Action menus with styled items and dividers
table:Styled data table headers and responsive rows
image:Layout-shift resistant responsive images

Adding Components

Install components individually or all at once:

Terminal

bash

goks ui add button input card dialog badge dropdown table

Using Components in GOX

app/page.gox

package app

import (
	"github.com/misbakhul29/goks/pkg/component"
	"github.com/misbakhul29/goks/pkg/html"
	"github.com/user/myapp/components/ui"
)

type Page struct {
	component.ComponentBase
}

func (p *Page) Render() *component.Node {
	return html.Main(component.C(&ui.Button{Label: "Save Changes", Variant: "primary"}), component.C(&ui.Badge{Label: "Active", Variant: "success"}), component.C(&ui.Input{Placeholder: "[email protected]", Type: "email"})).Class("p-8 space-y-6")
}