Getting Started

Everything you need to start building interfaces with uicraft — a pure-CSS component library with utility classes.

What is uicraft

A zero-JS, CSS-only design system for building production UIs.

No JavaScript runtime
Pure CSS — works with any framework or plain HTML
Design tokens from Figma
2-layer color system: Palette scales mapped to semantic tokens
70+ ready components
From atoms (Button, Input) to full patterns (Pricing Card, Chat Bubble)
Built-in dark mode
Toggle with a single class — all tokens adapt automatically

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.
&lt;script&gt;
  // Apply saved theme on page load
  const mode = localStorage.getItem('theme');
  if (mode === 'dark' ||
      (!mode &amp;&amp; matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark');
  }
&lt;/script&gt;

Theme Presets

Switch visual themes with the data-theme attribute. Each theme changes fonts, radius, and color palette.

html
data-theme="default"
Default
Inter, 12px radius
Preview
Project Card
Marketing Site Refresh
data-theme="editorial"
Editorial
Source Serif 4, 10px radius
Preview
Project Card
Marketing Site Refresh
data-theme="rounded-sans"
Rounded Sans
Manrope, 14px radius
Preview
Project Card
Marketing Site Refresh
&lt;!-- Theme preset --&gt;
&lt;html data-theme="editorial"&gt;

&lt;!-- Dark mode --&gt;
&lt;html class="dark"&gt;

&lt;!-- Both --&gt;
&lt;html data-theme="rounded-sans" class="dark"&gt;

Next Steps

Explore the rest of the documentation.

Design Tokens
Colors, typography, spacing, shadows — the foundation
Utilities
500+ utility classes for layout, spacing, color, and more
Layout & Grid
Container, 12-column grid, responsive breakpoints
Theming
Theme presets, dark mode, custom themes