← Back to archive

Repo of the Day

jnsahaj/tweakcn

Published: Mar 20, 2025

Open repository ↗

A visual no-code editor for shadcn/ui components

Summary

tweakcn is a visual, no-code theme editor for shadcn/ui and Tailwind CSS that lets engineers adjust component styling without hand-editing config files. It ships with preset themes and is positioned as a way to make shadcn/ui-based sites look distinct rather than interchangeable.

What it is useful for

The README frames the problem plainly: websites built with shadcn/ui frequently end up looking the same. tweakcn is aimed at engineers and designers who want their shadcn/ui components to feel different without spending time tweaking CSS variables, Tailwind configuration, or individual component files by hand.

Concretely, it is useful when you want to:

  • Start from a preset theme and adjust it visually rather than from a blank slate.
  • Customize shadcn/ui styling through a visual interface, with the README describing the goal as offering "advanced customisation for each aspect of your UI."
  • Shorten the experimentation loop when iterating on the look-and-feel of a new Tailwind-based project.

One documented limitation is that the README does not enumerate every individual customization knob in the editor — it points to tweakcn.com for the full feature list, so the exact controls available should be confirmed there rather than assumed from the README.

How engineers can use it

The README documents a straightforward local setup:

  1. Clone the repository: git clone https://github.com/jnsahaj/tweakcn.git
  2. Enter the directory: cd tweakcn
  3. Install dependencies: npm install (yarn or pnpm are also listed as options in the prerequisites)
  4. Start the development server: npm run dev
  5. Open http://localhost:3000 in a browser

Prerequisites are Node.js 18+ and npm, yarn, or pnpm. Once running, the editor can be explored locally and presets can be tested against the live preview.

The project is written in TypeScript, tagged with the shadcn, shadcn-ui, tailwindcss, and tailwindcss-v4 topics, and is released under the Apache-2.0 license. For instructions on contributing, the README defers to a separate CONTRIBUTING.md file, and for the complete list of editor features it defers to tweakcn.com, so readers looking for either should follow those references rather than expecting them inline.