Introduction
Veritheme 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 Veritheme.
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 Veritheme
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="veritheme.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="vt-bg-surfaces-background vt-text-mains-primary vt-min-h-screen">
<div class="vt-container vt-py-12">
<h1 class="vt-text-3xl vt-font-bold vt-mb-4">Hello Veritheme</h1>
<p class="vt-text-mains-secondary vt-mb-6">Your first page with UC utilities.</p>
<button class="vt-btn vt-btn-primary">Get Started</button>
</div>
</body>
</html>CSS Layers
Veritheme 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 (vt-flex, vt-p-4, vt-text-mains-primary) with responsive & state variants
3
Component Classes
Pre-built components (vt-btn, vt-card, vt-input) composed from tokens & utilities
Class Naming
All classes use the vt- prefix to avoid conflicts with other frameworks.
vt-flex
display: flex
vt-p-4
padding: 1rem
vt-text-mains-primary
color: hsl(var(--mains-primary))
vt-btn vt-btn-primary
component class
vt-hover:bg-surfaces-subtle
state variant
vt-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 Veritheme.
Why not shadcn/ui or another library?
shadcn/ui is great for React. Veritheme 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.