SDK Reference

# Add the Go module
go get github.com/emergent-company/go-daisy

# Install Tailwind CSS and DaisyUI
npm install tailwindcss @tailwindcss/cli daisyui@latest

# Configure tailwind.config.js:
#   module.exports = {
#     plugins: [require("daisyui")],
#   }

# Build CSS:
#   npx @tailwindcss/cli -i assets/app.css -o static/css/app.css

package main

import (
    "github.com/labstack/echo/v4"
    "github.com/emergent-company/go-daisy/components/layout"
    "github.com/emergent-company/go-daisy/render"
)

func main() {
    e := echo.New()
    e.GET("/", func(c echo.Context) error {
        page := layout.Page("My App", "nord",
            layout.PageContent("Hello, go-daisy!"),
        )
        render.RenderPage(c.Response().Writer, c.Request(), page)
        return nil
    })
    e.Logger.Fatal(e.Start(":8080"))
}

import "github.com/emergent-company/go-daisy/components/ui"

// Primary button
ui.Button(ui.ButtonProps{Label: "Submit", Style: ui.ButtonPrimary})

// Outlined button with HTMX
ui.Button(ui.ButtonProps{
    Label:    "Load",
    Style:    ui.ButtonOutline,
    Block:    true,
    HxGet:    "/api/data",
    HxTarget: "results",
})

// Ghost small button
ui.Button(ui.ButtonProps{
    Label:      "Edit",
    Style:      ui.ButtonGhost,
    ExtraClass: "btn-sm",
})

ui.Badge(ui.BadgeProps{
    Label:   "Active",
    Variant: ui.BadgeSuccess,
    Size:    ui.BadgeSizeSM,
})

ui.Badge(ui.BadgeProps{
    Label:   "Beta",
    Variant: ui.BadgeWarning,
    Size:    ui.BadgeSizeMD,
})

ui.Card(ui.CardProps{
    Title:    "Total Users",
    Value:    "1,234",
    Icon:     "lucide--users",
    IconBg:   "bg-primary/10",
    IconColor:"text-primary",
})

ui.StatCardMinimal("CPU", "45%", "lucide--cpu")

table.TableWithProps(table.TableProps{
    Size:     "sm",
    Bordered: true,
}) {
    table.TableHead() {
        table.TableHeadRow() {
            table.TableHeadCell("Name")
            table.TableHeadCell("Role")
        }
    }
    table.TableBody() {
        table.TableRow() {
            table.TableCell("Alice")
            table.TableCell("Admin")
        }
    }
}

form.FormField(form.FormFieldProps{
    Label:       "Email",
    Name:        "email",
    Type:        "email",
    Placeholder: "user@example.com",
    Required:    true,
})

form.FormField(form.FormFieldProps{
    Label:   "Role",
    Name:    "role",
    Type:    "select",
    Options: []form.SelectOption{
        {Value: "admin", Label: "Admin"},
        {Value: "user",  Label: "User"},
    },
})

import "github.com/emergent-company/go-daisy/render"

// RenderAuto — chooses full page vs. fragment based on HX-Request header.
render.RenderAuto(w, r, fullPage, partialContent)

// RenderTriple — three-tier: full shell / sidebar swap / tab swap.
render.RenderTriple(w, r, shellContent, sidebarContent, tabContent)

// RenderPage — always renders the full HTML shell.
render.RenderPage(w, r, pageComponent)

// RenderPartial — always renders the content fragment only.
render.RenderPartial(w, r, contentComponent)

// RedirectAfterMutation — HX-Redirect for HTMX, 303 for plain.
render.RedirectAfterMutation(w, r, "/new-path")

// AppendToast — writes an hx-swap-oob toast fragment.
render.AppendToast(w, r,
    ui.Toast(ui.ToastProps{Message: "Saved!", Type: "alert-success"}),
)

// In your layout shell:
layout.Page("My App", "nord") {   // "nord" = light theme
    // children...
}

// Or pass "" to use the browser/OS default.
layout.Page("My App", "") { ... }

// ThemeSwitcher component for user toggle:
ui.ThemeSwitcher()

// Available DaisyUI themes: light, dark, nord, dracula, cupcake, etc.
// Configure in tailwind.config.js under daisyui.themes.

// ── Line ladder — the border/rule scale (components/css/custom.css) ──────
//    Declared in the component CSS consumers import, not in assets/app.css,
//    so any build that imports go-daisy's components gets the steps for free.
//
//   border-line         DEFAULT   = --color-base-200
//     A surface that sits on the page (card, panel, list, table wrapper),
//     a region divider inside a surface, and a floating surface's edge
//     (popover, menu, modal) where the shadow carries the elevation.
//
//   border-line-strong  EMPHASIS  = --color-base-300
//     Control outlines (input, outline button, chip, swatch, editor),
//     separator bars and keyboard chips, rules that must assert over
//     scrolling content (sticky bar), edges on an opaque bg-base-200 fill.
//
//   border-line-translucent  TRANSLUCENT  = --color-base-content at 10%
//     A translucent hairline for a surface the surface ramp cannot serve
//     (a bg-base-200/40 fill, where --color-base-200 nearly vanishes:
//     soft box, disclosure). Most present edge of the three in nord and
//     dracula; marginally below line-strong in flow. Opaque vs translucent
//     is not a strength ramp, so the step is named for what it is — never
//     for the muted ladder's -bright slot (where -bright means MOST
//     emphatic). Positional adjectives stay reserved for steps genuinely
//     ordered by strength: line < line-strong.
//
// Every step derives from the theme's base variables, so nord, dracula and
// flow each keep their own hue. Quieter than border-line? Use the opacity
// modifier (border-line/50) — there is no sub-visible step by design.
// Directional forms: border-t-line, border-b-line, border-e-line,
// border-s-line, divide-line, divide-line-strong.

# 1. Create component file
touch components/ui/<name>.templ

# 2. Write your Templ component — see existing files for conventions

# 3. Run the build pipeline
task build:ui    # generates *_templ.go + compiles Tailwind CSS
task build       # full build: templ + CSS + Go binary

# 4. Add a gallery showcase entry in
#    cmd/gallery/internal/gallery/seed.go
#    as a GalleryComponent with variants and tokens

# 5. Run the gallery
task gallery     # http://localhost:11000

# Conventions:
# - Return templ.Component from Go funcs
# - Use DaisyUI classes (btn, badge, card, etc.)
# - class string as last param for CSS override
# - strconv.Itoa for int-to-string
# - No explicit import of "github.com/a-h/templ" in .templ files