Introduction
uicraft is a collection of beautifully designed UI components built on a custom utility layer. Not a library you install — a set of components you own.
Principles
Core ideas behind uicraft.
You own the code
Copy components into your project. No package to maintain, no version lock-in.
Semantic tokens
Every value uses design tokens. Swap a theme and the whole UI adapts.
Dark mode first
Toggle with a single class on
<html> — no extra stylesheets.No JavaScript runtime
Pure HTML & CSS. Interactive behavior is opt-in vanilla JS.
Quick Start
Include the stylesheet, add a Google Font, and start building.
html
Hello uicraft
Your first page with UC utilities.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="uicraft.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<title>My App</title>
</head>
<body class="uc-bg-neutrals-background uc-text-fg-primary uc-min-h-screen">
<div class="uc-container uc-py-12">
<h1 class="uc-text-3xl uc-font-bold uc-mb-4">Hello uicraft</h1>
<p class="uc-text-fg-secondary uc-mb-6">Your first page with UC utilities.</p>
<button class="uc-btn uc-btn-primary">Get Started</button>
</div>
</body>
</html>CSS Layers
uicraft ships three layers of CSS that work together.
1
Design Tokens
CSS variables for colors, spacing, radius, shadows, typography — generated from theme JSON
2
UC Utilities
500+ utility classes (uc-flex, uc-p-4, uc-text-fg-primary) with responsive & state variants
3
Component Classes
Pre-built components (uc-btn, uc-card, uc-input) composed from tokens & utilities
Class Naming
All classes use the uc- prefix to avoid conflicts with other frameworks.
uc-flex
display: flex
uc-p-4
padding: 1rem
uc-text-fg-primary
color: hsl(var(--fg-primary))
uc-btn uc-btn-primary
component class
uc-hover:bg-neutrals-subtle
state variant
uc-md:flex-row
responsive variant
Dark Mode
Add the dark class to <html> — all tokens switch automatically.
html
Light preview
Analytics Overview
Revenue is up 12% this week.
Dark preview
Analytics Overview
Revenue is up 12% this week.
<script>
// Apply saved theme on page load
const mode = localStorage.getItem('theme');
if (mode === 'dark' ||
(!mode && matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
}
</script>FAQ
Common questions about uicraft.
Why not shadcn/ui or another library?
shadcn/ui is great for React. uicraft is framework-agnostic — the same components work in any HTML context. It's also built on a Figma-aligned token system.
Do I need all the components?
No. Pick what you need. Since you copy-paste individual components, you only bring in what you use.
Can I customize the design tokens?
Yes. All tokens are CSS custom properties. Override them globally or scope overrides to a component. See Design System.
Is this open source?
Yes. MIT license. Use it in personal and commercial projects.
Next Steps
Explore the rest of the documentation.