Veritheme

Veritheme

66 beautifully designed UI components. Pure CSS utility classes, semantic design tokens, dark mode, and a vanilla JS bundle — no framework, no build step required.

veritheme.com · Docs & live demos · Design-system wizard

---

What is Veritheme?

Veritheme is a framework-agnostic UI component library delivered as plain CSS and vanilla JavaScript. You style your markup with vt- utility classes and drop in data-* attributes for interactive behavior — the JS bundle wires everything up automatically. No React, no Tailwind runtime, no bundler needed.

It's built around a 2-layer design token system (raw palette → semantic tokens) that keeps colors, spacing, typography, and radii consistent across light/dark modes and across three shipped themes. The exact same token format powers the website, the Figma plugin, and exported custom themes — so design and code never drift apart.

Install

npm install veritheme

Or use it straight from a CDN with no install at all:

With a bundler:

import 'veritheme/veritheme.min.css';
import 'veritheme'; // initializes interactive components

What's in this package

| File | Description | |------|-------------| | veritheme.min.css / veritheme.css | All components + vt- utility classes + design tokens (minified / readable) | | veritheme.min.js / veritheme.js | Vanilla JS for interactive components, zero dependencies | | themes/*.json | Theme token files — default, editorial, rounded-sans | | theme-manifest.json | Index of available themes (name, label, font, dark-mode support) |

Package exports: veritheme/css, veritheme/js/unminified, veritheme/themes/*, veritheme/theme-manifest.

Usage

Utility classes

Every utility uses the vt- prefix:

  Hello

Dark mode

Add .dark to ``:

Themes

Add data-theme to ` — choose default, editorial, or rounded-sans`:

Interactive components

Markup uses data-* attributes as hooks; the JS bundle initializes them automatically:

  
    Title
    Content
  

Themes & the design-system wizard

Three themes ship in the box (each with a light and dark variant):

• Default — Inter, clean and neutral
• Editorial — Source Serif 4, editorial / long-form
• Rounded Sans — Manrope, soft and friendly

Want your own? Build your design system. Get the components. The design-system wizard is a 7-step builder — colour scales → semantic palette → shape → spacing grid → typography → component rebinding → hand-off — where every component restyles live as you go. At the end, download the tokens for the Figma plugin and a ready-to-use CSS + JS bundle. One token file drives both code and design.

Figma plugin

Veritheme — Design Tokens & UI Components is a design system generator for Figma. Select the components you need, customize your theme, and generate production-ready design tokens and UI components directly into your file.

What it does:

• Generates Figma Variables — colors, typography, spacing, radius, borders, shadows
• Creates Light and Dark mode collections automatically
• Includes 45 UI components: buttons, form controls, navigation, feedback, and data display
• Lets you customize the theme — brand color, neutrals, typography, and semantic tokens — before generating
• Outputs a structured, token-driven component library ready to use in your designs

Who it's for: Designers and product teams who want a consistent, token-driven foundation without building a design system from scratch.

It shares the same token format as the design-system wizard, so a system built in the browser re-themes your Figma library to match.

Use with AI agents (MCP)

Veritheme ships an official MCP server, @veritheme/mcp-server — AI assistants (Claude Code, Cursor, any MCP client) can query real components, design tokens, themes, and HTML snippets instead of guessing class names:

# Claude Code
claude mcp add veritheme -- npx -y @veritheme/mcp-server

// any MCP client config
{ "mcpServers": { "veritheme": { "command": "npx", "args": ["-y", "@veritheme/mcp-server"] } } }

Tools: list_components, get_component, get_tokens, get_theme, get_snippet, search.

The site also serves veritheme.com/llms.txt — a compact, LLM-friendly map of the library for web-browsing agents.

The Veritheme ecosystem

| Package / repo | What it is | |----------------|-----------| | veritheme | This package — the CSS + JS distribution bundle | | @veritheme/mcp-server | MCP server exposing components/tokens/themes to AI agents | | Veritheme Figma plugin | Generate design tokens + 45 UI components into Figma | | veritheme.com | Docs, live demos, and the Theme Generator |

License

MIT © Siarhei Tarasenko

Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: tarasenko-by
• Source: tarasenko-by/veritheme
• License: MIT
• Homepage: https://veritheme.com

Install and usage instructions live in the source repository linked above.