What is this?
tweakcn is a visual no-code theme editor for Tailwind CSS and shadcn/ui components — you restyle your UI through a graphical editor instead of hand-writing theme code, starting from ready-made presets.
tweakcn is a visual no-code theme editor for Tailwind CSS and shadcn/ui components — you restyle your UI through a graphical editor instead of hand-writing theme code, starting from ready-made presets.Is it a website I use in the browser or a library I install?It's a web app: the hosted version lives at tweakcn.com, and you can also run the app yourself locally. What you take into your own project is the theme it produces, not the editor itself.
It's a web app: the hosted version lives at tweakcn.com, and you can also run the app yourself locally. What you take into your own project is the theme it produces, not the editor itself.How do I run it locally?You need Node.js 18+ and npm, yarn or pnpm. Clone the repo, install dependencies, start the dev server and open it in your browser — it's a Next.js app, so that's npm run dev.
You need Node.js 18+ and npm, yarn or pnpm. Clone the repo, install dependencies, start the dev server and open it in your browser — it's a Next.js app, so that's npm run dev.Is it only useful if my project already uses shadcn/ui?Essentially yes — it's built to theme shadcn/ui components styled with Tailwind CSS, so it assumes your project is on that stack. For anything else there's nothing for it to edit.
Essentially yes — it's built to theme shadcn/ui components styled with Tailwind CSS, so it assumes your project is on that stack. For anything else there's nothing for it to edit.Why did the author build this?Because websites made with shadcn/ui famously look the same. The goal is a platform where you can discover endless customization options and then put your own twist on them.
Because websites made with shadcn/ui famously look the same. The goal is a platform where you can discover endless customization options and then put your own twist on them.Does it ship ready-made themes, or do I design everything myself?It comes with beautiful theme presets to get started, while still aiming to offer advanced customization for each aspect of your UI.
It comes with beautiful theme presets to get started, while still aiming to offer advanced customization for each aspect of your UI.Is there anything AI-powered under the hood?The dependency list includes Google AI SDKs (@ai-sdk/google and @google/generative-ai), so the app hooks into Google AI — though the README itself doesn't describe what those AI features do.
The dependency list includes Google AI SDKs (@ai-sdk/google and @google/generative-ai), so the app hooks into Google AI — though the README itself doesn't describe what those AI features do.What are similar projects?arc-library, rare-ui, Monocharts, awesome-shadcn-ui, solid-glass, ui, daisyui, lint
arc-library, rare-ui, Monocharts, awesome-shadcn-ui, solid-glass, ui, daisyui, lintWhich topics is it in?shadcn, design-tools, shadcn-ui, ui-design, no-code, design-system, theme, tailwindcss, editor, design, nextjs, ui-components
shadcn, design-tools, shadcn-ui, ui-design, no-code, design-system, theme, tailwindcss, editor, design, nextjs, ui-components