Development · Web app

Tinte

Design system compiler for shadcn presets, themes, and agent plugins

Visit github.com ↗

Tinte turns design references or prompts into a unified set of semantic OKLCH tokens and design instructions. It compiles these tokens into directly installable shadcn/ui presets, editor themes, and AI agent skills, with a CLI to extract, build, and lint token usage in code.

What it's for

  • Generate and install custom shadcn/ui color themes directly via the shadcn CLI
  • Compile a website's brand tokens into an agent plugin (SKILL.md and CSS) for AI coders
  • Lint codebase files to catch any colors or styles bypassing design tokens
  • Export unified color palettes to VS Code, Cursor, Zed, and terminal configs

Features

  • Prompt-based and reference-based theme generator using OKLCH color models
  • Preset API for shadcn v4 to install themes with npx shadcn add
  • Agent plugin compiler generating SKILL.md and tokens.css for AI coding tools
  • CLI tool to extract styles from live pages, normalize them, and lint paths
  • Cross-format exporter supporting over 19 targets including editors and terminals
  • Public API to search and retrieve public themes and preset packs

Pricing

Open source. Free and open source (MIT license)

Details

Type
Web app
Category
Development
Topic
Theme Generators
Open source
Yes
Platforms
Web, Command line
For
Frontend developers and designers using shadcn/ui and AI coding agents
Alternative to
shadcn/ui themes, Realtime Colors, Coolors
Tags
shadcn, theming, design tokens, agent skills, cli, tailwind

Why it was saved

  • @RaillyHugo, 16 March 2025: Generates complete shadcn/ui themes (colors, radius) with copy CSS / save theme options; installable directly into a project.

Compare

Related

  • shadcn Registry Directory

    Discover and pull third-party component registries directly via the shadcn CLI

  • Efferd

    Pre-built, responsive shadcn/ui blocks and layouts for React applications

  • 21st.dev

    Curated directory of crafted React, Tailwind, and shadcn UI components.

  • MicroKit UI

    Free copy-paste React and CSS micro-interactions for modern web interfaces

  • prompt-kit Primitives

    Fullstack building blocks for AI apps installable with shadcn CLI

  • ReUI

    Curated shadcn/ui components, application blocks, animated elements, and MCP server.

Updated