themekit

ThemeKit

Native, brand-neutral SwiftUI design system — 175 token-bound components that re-skin from a single accent color: light/dark, per-subtree, zero core dependencies.

Docs · API (DocC) · Wiki · npm (MCP) · Releases · Issues · Changelog

The banner above is rendered by ThemeKit itself (its own tokens + components) — the same render pipeline that paints every tile in the gallery.

A theme-driven, brand-neutral SwiftUI component library. Every color, typography, spacing, radius and shadow is a design token resolved at runtime from the active Theme, so the whole UI re-skins from a single accent color — without touching component code. Components never hardcode a color — swap the theme and everything follows.

import ThemeKit

Features

• 🎨 Figma → ThemeKit — design_via_figma_mcp reads a design through a Figma MCP server, the LLM maps it to idiomatic ThemeKit, and the server verifies it (get_component_api / validate_code); see the Advanced — Figma & MCP section.
• 🔁 Code ⇄ Figma round-trip — export_figma_variables turns the token catalog
  • 32 presets into a themeable Figma Variables library (one mode per preset); import_figma_variables pulls any company's Figma file back into a live ThemeConfig that re-skins every component. One vocabulary, both directions.
• 🪄 Design Mode — point ThemeKit at a free-form design.md (or a bundled style — Linear, Notion, iOS, Brutalist, Pastel) and it re-skins every component to match, via an offline heuristic parser (+ an optional LLM path).
• 🤖 AI-native — a 22-tool MCP server, a Claude Code Agent skill, and an llms.txt, so agents generate correct, token-bound UI — all from one source.
• 🧩 Design tokens everywhere — colors / radius / spacing from JSON, typography / shadows in code; one semantic name (fg-hero, rd-sm), different values per theme.
• 🌈 33 theme presets — ThemeKit's Default plus 32 ready-made color sets (cupcake, dracula, cyberpunk, nord…) inspired by daisyUI, each recoloring the whole Ant-style palette on device.
• 📸 Snapshot + render testing — every component renders to a theme-aware PNG via ImageRenderer; the suite guards tokens, themes, validation and renders.
• 204 components — Atoms / Molecules / Organisms, all token-bound.
• 🧬 Flexibility architecture — six archetype style protocols (CardStyle, FieldStyle, ChipStyle, BarStyle, MeterStyle, ToastStyle, ListRowStyle) let you re-skin a whole component family with .cardStyle(_:) / .fieldStyle(_:) / etc., ViewBuilder slots (.leading{}, .trailing{}, .empty{}…) inject custom content, and config modifiers accept theme tokens (.spacing(SpacingKey), .cornerRadius(RadiusRole)) alongside raw values — all additive, defaults pixel-identical.
• Runtime theming — a Swift token generator + a live configurator turn any accent (or base-100) color into a full Ant-style palette on device (no Python, no baked files).
• Validation — pure, testable predicates + a SwiftUI presentation layer.
• Accessibility — Dynamic Type and Reduce Motion honored throughout.
• Localization — English-default strings via a bundled String Catalog; translate the entire library by dropping one ThemeKit.xcstrings into your app (no per-call code), with restart-free in-app language switching. Every default is also overridable per call.
• 📅 Calendar add-on — ThemeKitCalendar adds a token-bound date-range picker (DateRangePicker, built on Almanac) that re-skins with the active theme; opt-in, iOS-only.
• Zero-dependency core — Lottie and the Calendar are opt-in, separate products.