back to home

jnsahaj / tweakcn

A visual no-code theme editor for shadcn/ui components

9,416 stars
583 forks
47 issues
TypeScriptJavaScriptCSS
Chat with CodebaseArchitecture ScanSecurity AuditExplain Codebase

AI Architecture Analysis

This repository is indexed by RepoMind. By analyzing jnsahaj/tweakcn in our AI interface, you can instantly generate complete architecture diagrams, visualize control flows, and perform automated security audits across the entire codebase.

Our Agentic Context Augmented Generation (Agentic CAG) engine loads full source files into context, avoiding the fragmentation of traditional RAG systems. Ask questions about the architecture, dependencies, or specific features to see it in action.

Click here to launch the interactive analysis workspace

Embed this Badge

Showcase RepoMind's analysis directly in your repository's README.

[![Analyzed by RepoMind](https://img.shields.io/badge/Analyzed%20by-RepoMind-4F46E5?style=for-the-badge)](https://repomind-ai.vercel.app/repo/jnsahaj/tweakcn)
Preview:Analyzed by RepoMind

Repository Summary (README)

Preview
<div align="center"> <h1>tweakcn.com</h1> </div> <div align="center"> <a href="https://vercel.com/oss"> <img alt="Vercel OSS Program" src="https://vercel.com/oss/program-badge.svg" /> </a> <br /> <br /> <a href="https://discord.gg/Phs4u2NM3n" target="_blank"> <img alt="Discord" src="https://img.shields.io/discord/1353416868769173576?style=for-the-badge&logo=discord&logoColor=%23ffffff"> </a> <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/jnsahaj/tweakcn?style=for-the-badge&logo=github"> <a href="https://x.com/iamsahaj_xyz"> <img alt="X (formerly Twitter) URL" src="https://img.shields.io/twitter/url?url=https%3A%2F%2Fx.com%2Fiamsahaj_xyz&style=for-the-badge&logo=x&label=%40iamsahaj_xyz&color=%2300000000" /> </a> </div> <br />

tweakcn is a powerful Visual Theme Editor for tailwind CSS & shadcn/ui components. It comes with Beautiful theme presets to get started, while aiming to offer advanced customisation for each aspect of your UI

tweakcn.com

Motivation

Websites made with shadcn/ui famously look the same. tweakcn is a tool that helps you customize shadcn/ui components visually, to make your components stand-out. The goal is to build a platform where a user can discover endless customization options and then have the ability to put their own twist on it.

Current Features

You can find the full feature list here: https://tweakcn.com/#features

Run Locally

IMPORTANT: For contributions, please see CONTRIBUTING.md.

Prerequisites

  • Node.js 18+
  • npm / yarn / pnpm

Installation

  1. Clone the repository:
git clone https://github.com/jnsahaj/tweakcn.git
cd tweakcn
  1. Install dependencies:
npm install
  1. Start the development server:
npm run dev
  1. Open http://localhost:3000 in your browser.

Contributors

<a href="https://github.com/jnsahaj/tweakcn/graphs/contributors"> <img src="https://contrib.rocks/image?repo=jnsahaj/tweakcn" /> </a>

Made with contrib.rocks.

Interested in Contributing?

Contributions are welcome! Please feel free to submit a Pull Request.

Star History

<p align="center"> <a target="_blank" href="https://star-history.com/#jnsahaj/tweakcn&Date"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=jnsahaj/tweakcn&type=Date&theme=dark"> <img alt="GitHub Star History for jnsahaj/tweakcn" src="https://api.star-history.com/svg?repos=jnsahaj/tweakcn&type=Date"> </picture> </a> </p> <!-- GitAds-Verify: HX84XPI5OQ816367AROGJ9SROARUHQER -->