Installation

Get kraft-ui into your project in under 5 minutes. Choose between a Go module dependency or copy-paste ownership.

Prerequisites

→ Go 1.22 or later
→ templ v0.2.x installed (go install github.com/a-h/templ/cmd/templ@latest)
→ Node.js 18+ (for Tailwind CSS)

Option A — Go module (import)

Use kraft-ui as a Go dependency. Best for getting started fast.

bash

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

Then import and use:

page.templ

package pages

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

templ MyPage() {
    @button.Button(button.Props{Variant: button.VariantPrimary}) {
        Hello, GOTH stack
    }
}

Option B — Copy-paste (shadcn style)

Copy individual component files into your-project/web/components/ui/. You own the code — modify freely.

bash

# Copy a single component into your project
curl -o web/components/ui/button.templ \
  https://raw.githubusercontent.com/appkrafterrz/kraft-ui/main/pkg/ui/button/button.templ

Tailwind CSS Setup

kraft-ui uses Tailwind CSS v4. Add to your project:

bash

npm install @tailwindcss/cli tailwindcss

Create tailwind.css at your project root:

tailwind.css

@import "tailwindcss";

@theme {
  --color-brand-500: oklch(55% 0.185 260); /* your brand color */
  /* see /docs/theming for the full token catalog */
}

Build CSS:

bash

# Watch (dev)
npx @tailwindcss/cli -i ./tailwind.css -o ./web/static/css/styles.css --watch

# Build (prod)
npx @tailwindcss/cli -i ./tailwind.css -o ./web/static/css/styles.css --minify

Add to Base Layout

layouts/base.templ

templ Base() {
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="/static/css/styles.css"/>
        <!-- HTMX -->
        <script src="https://unpkg.com/htmx.org@2.0.4" defer></script>
        <!-- Alpine.js Focus plugin (needed for modals) -->
        <script src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js" defer></script>
        <!-- Alpine.js -->
        <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
        <!-- kraft.js (modal store, toast store, HTMX config) -->
        <script src="/static/js/kraft.js"></script>
    </head>
    <body>
        { children... }
        <!-- Toast region — required for toast.Toast() OOB swaps -->
        <div id="toast-region" aria-live="polite"
             class="fixed bottom-0 right-0 z-[100] p-4 pointer-events-none flex flex-col gap-2 max-w-sm w-full">
        </div>
    </body>
    </html>
}

You're ready. Head to Button to start building.