ui-lib

Copy-paste CSS components. No build step. No npm. No Tailwind. Just plain CSS + Alpine.js.

Browse Components Quick Start

35+ components 0 build steps 100% dark mode

📦 No Build Step

Link the CSS files, copy the HTML. No npm, no webpack, no Tailwind purge.

🌙 Dark Mode

Toggle a class. CSS custom properties handle the rest. Every component supports it.

🎨 Themable

Change 10 CSS variables, re-theme the entire library. One file: theme.css.

⚡ Alpine.js

Interactive components powered by Alpine.js from CDN. No bundler needed.

📱 Responsive

Every component works on mobile, tablet, and desktop out of the box.

🔧 Go-Friendly

Designed for Go html/template. Copy snippets directly into your templates.

Quick Start

1. Copy the CSS files into your project

cp theme.css base.css /your/project/static/
cp components/button.css components/modal.css /your/project/static/

2. Link them in your HTML

<link rel="stylesheet" href="/static/theme.css">
<link rel="stylesheet" href="/static/base.css">
<link rel="stylesheet" href="/static/components/button.css">
<link rel="stylesheet" href="/static/components/modal.css">

<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

3. Copy the component HTML into your Go template

<button class="btn btn-primary">Click me</button>

4. Or combine all CSS into one file

cat theme.css base.css components/*.css > static/ui.css