> ## Documentation Index
> Fetch the complete documentation index at: https://kindling.birklid.com/llms.txt
> Use this file to discover all available pages before exploring further.

# tweakcn

> Visual no-code theme editor for shadcn/ui — customize colors, typography, and design tokens with live preview and copy-paste output.

<div style={{display: "flex", gap: "8px", marginBottom: "1.5rem", flexWrap: "wrap"}}>
  <Badge>Open Source</Badge>
  <Badge color="#F97316">Applications Layer</Badge>
</div>

# tweakcn

**Visual theme editor for shadcn/ui — stop every project looking the same, customize design tokens live and copy the result straight into your config.**

<Frame>
  <img src="https://mintcdn.com/tumbleweedlabs/QT0SlrwbzlJBSMcS/images/og-tweakcn.png?fit=max&auto=format&n=QT0SlrwbzlJBSMcS&q=85&s=7e2283790c21888a17717d196d663916" alt="tweakcn GitHub" width="1200" height="600" data-path="images/og-tweakcn.png" />
</Frame>

<CardGroup cols={4}>
  <Card title="Type" icon="code-branch">Open Source (Apache 2.0)</Card>
  <Card title="Stack Layer" icon="browsers">Applications</Card>
  <Card title="Language" icon="code">TypeScript</Card>
  <Card title="Stars" icon="star">9.8k+</Card>
</CardGroup>

## What it is

tweakcn is a visual, no-code theme editor for shadcn/ui components. The problem it solves: every project using the default shadcn/ui setup ends up looking nearly identical. tweakcn gives you a live editor with preset themes and granular controls over colors, typography, border radius, and other design tokens. The output is copy-paste compatible with any shadcn/ui project — no new dependencies, just updated CSS variables and config.

It ships with curated presets (including the Solar Dusk theme that Kindling itself uses) and supports full custom theming from scratch. The project is actively maintained and works with the current shadcn/ui and Tailwind CSS 4 ecosystem.

<Tip>
  **Use this when** you're building a React app with shadcn/ui and want to match your brand's design system without manually hunting through CSS variables — spend 10 minutes in the editor instead of hours in a stylesheet.
</Tip>

## Get started

<CardGroup cols={2}>
  <Card title="tweakcn.com ↗" icon="globe" href="https://tweakcn.com/">
    Live editor with presets and export.
  </Card>

  <Card title="GitHub ↗" icon="github" href="https://github.com/jnsahaj/tweakcn">
    Source code and contribution guide.
  </Card>
</CardGroup>

## Related tools

<CardGroup cols={2}>
  <Card title="Impeccable" icon="globe" href="/library/design/impeccable">
    Design skill for AI coding assistants — prevent generic AI-generated UI.
  </Card>

  <Card title="Huashu Design" icon="github" href="/library/skills/huashu-design">
    AI skill for prototypes, slides, and motion graphics from text descriptions.
  </Card>
</CardGroup>