KitCla is a component-based Go design system kit for building web applications with atomic design principles and server-side springled HTML generation.
KitCla brings the best of atomic design methodology to Go web development. Build maintainable, scalable UIs with confidence.
Build with reusable, composable components. Each component is self-contained and can be combined to create complex interfaces.
Build interfaces systematically with atoms, molecules, and organisms. Each component has a clear purpose and place in the hierarchy.
Generate HTML on the server for better performance and user experience. Fast initial page loads with Go's native rendering speed.
Server-side HTML enhanced with selective Alpine.js components. Get the performance of server rendering with targeted interactivity.
Completely self-contained with no external dependencies. Pure Go code that integrates with any Go web framework.
Purpose-built components for CRUD operations. Tables, forms, modals optimized for enterprise applications.
go get gitlab.com/ccyrillee/kitcla
Using KitCla's atomic design components
package main
import (
"fmt"
"gitlab.com/ccyrillee/kitcla"
"gitlab.com/ccyrillee/kitcla/goc"
)
func main() {
// Initialize component library
kit := kitcla.New()
// Create a button component
button := kit.Atoms.Buttons.Button.H(
"Click Me", "primary", "")
// Create input component
input := kit.Atoms.Inputs.TextInput.H(
"email", "Email Address")
// Render HTML
html := goc.RenderRoot(button)
fmt.Println(html)
}package main
import (
"fmt"
"gitlab.com/ccyrillee/kitcla"
"gitlab.com/ccyrillee/kitcla/goc"
)
func main() {
// Initialize component library
kit := kitcla.New()
// Alpine.js interactive button
button := kit.Atoms.Buttons.ButtonAlp.H(
"Click Me", "primary",
goc.Attr{"@click": "count++"})
// Counter display with Alpine.js
counter := kit.Component.Cas("span",
goc.Attr{"x-text": "count"}, "0")
// Wrapper with Alpine.js data
app := kit.Component.Cas("div",
goc.Attr{"x-data": "{ count: 0 }"},
counter, button)
// Render interactive HTML
html := goc.RenderRoot(app)
fmt.Println(html)
}Using the goc HTML generation framework
comp := kit.Component
// Basic element creation
div := comp.C("div")
// Element with CSS class
div := comp.Cc("div", "bg-blue-500")
// Element with CSS and content
card := comp.Ccv("div",
"bg-white p-4 rounded", "Card content")
// HTML generation shortcut
html := comp.H(card)
// Div shortcuts and wrappers
wrapper := comp.W("container mx-auto",
card)comp := kit.Component
// Alpine.js data binding
modal := comp.Ti("showModal",
comp.Ccv("div", "modal", "Modal content"))
// Alpine.js click handlers
button := comp.Cas("button",
goc.Attr{"@click": "showModal = true"},
"Open Modal")
// Alpine.js conditional rendering
alert := comp.Cas("div",
goc.Attr{"x-show": "showAlert"},
"Alert message")Real-world examples and patterns for building common UI components with KitCla's atomic design system.
Select an example to view
Atoms + Molecules = Complete Form
// Create form using atoms and molecules
form := kit.Organisms.Form.H(
kit.Atoms.Inputs.TextInput.H("name", "Name"),
kit.Atoms.Inputs.TextInput.H("email", "Email"),
kit.Atoms.Buttons.Button.H("Submit", "primary"),
)Complex organism with embedded molecules
// Build a data table with action buttons
table := kit.Organisms.Table.H(
columns,
dataRows,
kit.Molecules.Pagination.H(10, 100),
)JS enhanced interactivity
// Modal with Alpine.js integration
modal := kit.Organisms.Modal.H(
"Are you sure?",
kit.Atoms.Buttons.ButtonAlp.H("Delete", "danger"),
)Complex navigation organism
// Advanced navigation with sidebar
nav := kit.Organisms.DualNavbar.H(
mainMenuItems,
sidebarItems,
userProfile,
)Comprehensive atomic design system with atoms, molecules, and organisms for building modern web applications.
Basic building blocks
Simple combinations
Complex assemblies
Explore detailed documentation, usage examples, and API reference for all components.
Join the community of Go developers building server-first, component-smart web applications with KitCla's atomic design system and springled JS approach.