v0.1 — Early Preview

Kraft beautiful UIs
in pure Go.

Production-ready components built for the GOTH stack — Go, Templ, HTMX, Tailwind CSS, and Alpine.js. No React. No JSON APIs. Just clean, typed, copy-paste UI.

Start krafting Browse components
Built with Go 1.22+TemplHTMX 2Tailwind v4Alpine.js 3

See the difference

A form input field. Something every Go dev writes on every project. Here is what it looks like with and without kraft-ui.

Without kraft-ui
16 lines
<div class="flex flex-col gap-1.5">
  <label class="text-sm font-medium
                 text-text-primary">
    Email
  </label>
  <input
    type="email"
    placeholder="you@example.com"
    class="rounded-md border border-error-500
           px-3 py-2 text-sm bg-surface
           text-text-primary
           placeholder:text-text-muted
           focus:outline-none focus:ring-2
           focus:ring-error-500
           transition-colors"
  />
  <p class="text-xs text-error-600">
    Invalid email address
  </p>
</div>
With kraft-ui
4 lines
@input.Input(input.Props{
  Type:  "email",
  Label: "Email",
  Error: "Invalid email address",
})

// Typed. Consistent. IDE autocomplete.
// One place to update when design changes.
// Every dev on your team writes it
// the same way.

75%

less markup per field

1

file to update when design changes

0

class string debates on your team

30+ themes. One attribute.

Set data-theme on your HTML element. Every component adapts instantly. No extra code, no per-theme classes.

lightActive
darkActive
cupcakeActive
cyberpunkActive 
<html data-theme={ user.PreferredTheme }>
  <!-- every daisyui.* component adapts automatically -->

Built different. Kraft different.

Everything you'd expect from a modern component library, engineered for Go devs who mean business.

Typed Component Props

Every component takes a Go struct — no magic strings, no map[string]any. Your IDE autocompletes everything.

HTMX-first

Pass any hx-* attribute via templ.Attributes. Components are designed for server-driven interactions.

Copy-paste or Import

Copy components directly into your project for full ownership, OR import as a Go module dependency.

Alpine.js Micro-State

Dropdowns, modals, tabs — client-only interactions use Alpine.js. No server round-trip needed.

Tailwind v4 Theming

Full design token system via CSS @theme variables. Change your brand color in one line.

Accessible by Default

ARIA roles, labels, focus management, and keyboard navigation built into every component.

Kraft in seconds

1

Add to your Go project

go get github.com/appkrafterrz/kraft-ui@latest
2

Import a component

import "github.com/appkrafterrz/kraft-ui/pkg/ui/button"
3

Kraft something

@button.Button(button.Props{Variant: button.VariantPrimary}) {
    Kraft it
}