# Veritheme

> Veritheme — one source of truth for Figma, code & AI. 66 UI components: pure CSS utility classes, design tokens, dark mode, vanilla JS bundle.

- **Type:** MCP server
- **Install:** `agentstack add mcp-tarasenko-by-veritheme`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [tarasenko-by](https://agentstack.voostack.com/s/tarasenko-by)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [tarasenko-by](https://github.com/tarasenko-by)
- **Source:** https://github.com/tarasenko-by/veritheme
- **Website:** https://veritheme.com

## Install

```sh
agentstack add mcp-tarasenko-by-veritheme
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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](https://veritheme.com)** · [Docs & live demos](https://veritheme.com) · [Design-system wizard](https://veritheme.com/create/)

---

## 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

```bash
npm install veritheme
```

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

```html

```

With a bundler:

```js
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:

```html

  Hello

```

### Dark mode

Add `.dark` to ``:

```html

```

### Themes

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

```html

```

### Interactive components

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

```html

  
    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](https://veritheme.com/create/)** 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](https://www.figma.com/community/plugin/1610343587499165100)** 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`](https://www.npmjs.com/package/@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:

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

```json
// 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](https://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`](https://www.npmjs.com/package/veritheme) | This package — the CSS + JS distribution bundle |
| [`@veritheme/mcp-server`](https://www.npmjs.com/package/@veritheme/mcp-server) | MCP server exposing components/tokens/themes to AI agents |
| [Veritheme Figma plugin](https://www.figma.com/community/plugin/1610343587499165100) | Generate design tokens + 45 UI components into Figma |
| [veritheme.com](https://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](https://github.com/tarasenko-by)
- **Source:** [tarasenko-by/veritheme](https://github.com/tarasenko-by/veritheme)
- **License:** MIT
- **Homepage:** https://veritheme.com

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/mcp-tarasenko-by-veritheme
- Seller: https://agentstack.voostack.com/s/tarasenko-by
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.