---
name: tweakcn
slug: tweakcn
url: "https://dontmakeitugly.com/resources/tweakcn"
website: "https://tweakcn.com"
github: "https://github.com/jnsahaj/tweakcn"
type: tool
categories:
  - tools
  - components
tags:
  - shadcn
  - themes
  - tailwind
  - colours
  - css-variables
  - generator
frameworks:
  - react
  - tailwind
pricing: free
license: Apache-2.0
openSource: true
agentFriendly: good
agentAccessMethods:
  - public_web
  - github
  - copy_paste
  - cli
difficulty: beginner
staffPick: true
dateAdded: "2026-09-02"
lastVerified: "2026-09-02"
---

# tweakcn

A visual theme editor that makes a shadcn/ui app stop looking like every other shadcn/ui app.

- Type: Tool
- Categories: Tools, Components
- Pricing: Free · License: Apache-2.0
- Open source: yes
- Works with: React, Tailwind CSS, CSS variables

## What it is

tweakcn is a free, open-source theme editor for shadcn/ui. Adjust colours, radius, fonts, shadows and spacing with live preview, then export the CSS variables into your project. It also ships preset themes that are a big step up from the defaults.

## Why it's here

The single highest-leverage fix for "my app looks generic". Ten minutes here does more than an afternoon of prompting.

## Best for

- restyling shadcn/ui
- colour themes
- making an app feel less generic

## Links

- Website: https://tweakcn.com
- GitHub: https://github.com/jnsahaj/tweakcn

## Can my agent use this?

Yes, in two steps. Pick a theme visually, then give the exported CSS (or the registry install command it generates) to your agent to apply.

Agent friendliness: Good. Publicly accessible and useful to reference, but the agent will need to interpret it rather than install it.
Access methods: Public website, GitHub, Copy/paste, CLI.

## Prompt to hand your agent

```text
Use tweakcn as a design and implementation reference for this project.

What it is: A visual theme editor that makes a shadcn/ui app stop looking like every other shadcn/ui app.

Website: https://tweakcn.com
GitHub: https://github.com/jnsahaj/tweakcn

Use it specifically for:
- restyling shadcn/ui
- colour themes
- making an app feel less generic

How you can access it: Public website, GitHub, Copy/paste, CLI.
Works with: React, Tailwind CSS.
License: Apache-2.0. Respect it.

Read the documentation before writing code, and use the current version's API. Install it properly rather than re-implementing it. Adapt the defaults to this project's existing design tokens, typography, spacing and accessibility requirements. Do not blindly copy the entire resource.
```

## Related

- [Origin UI](https://dontmakeitugly.com/resources/origin-ui.md): Hundreds of polished, practical components built on shadcn/ui conventions.
- [Radix Colors](https://dontmakeitugly.com/resources/radix-colors.md): Colour scales designed for real UI, with light and dark modes that actually match.
- [UI Colors](https://dontmakeitugly.com/resources/uicolors.md): Turn one brand colour into a full Tailwind-style shade scale.
- [v0](https://dontmakeitugly.com/resources/v0.md): Vercel's generative UI tool: describe a screen, get a shadcn/ui implementation.

## In collections

- [Best resources for first-time vibe coders](https://dontmakeitugly.com/collections/first-time-vibe-coders.md)
- [Make your shadcn app look less generic](https://dontmakeitugly.com/collections/less-generic-shadcn.md)

tweakcn is an independent resource listed by Don't Make It Ugly. We link to it; we aren't affiliated with it. Pricing and licence details are as understood at the time of listing; check the official site.