tweakcn – Theme Editor & Generator for shadcn/ui
tweakcn is a web‑based visual editor that lets developers and designers create, customize, and export themes for the popular shadcn/ui component library. Built on top of Tailwind CSS v4, the tool provides a live preview of UI components as you tweak colors, spacing, typography, and custom CSS variables. The generated code can be copied instantly or downloaded as a ready‑to‑use Tailwind configuration, speeding up the design‑to‑development workflow.
Key Features
- Live visual editor – Adjust theme tokens (colors, fonts, radii, shadows) and see changes reflected instantly on sample shadcn/ui components.
- Tailwind CSS v4 compatibility – All edits are output as Tailwind configuration objects, ensuring seamless integration with modern Next.js or React projects.
- Custom style support – Add your own CSS variables or extend existing ones without leaving the UI.
- Export options – Download the full
tailwind.config.jssnippet, copy the CSS, or export a JSON theme file. - Responsive preview – Switch between mobile, tablet, and desktop breakpoints to verify design consistency.
- Dark mode toggle – Define separate light and dark palettes and preview both modes side‑by‑side.
- Component library showcase – Pre‑loaded shadcn/ui components (buttons, cards, forms, dialogs) act as a sandbox for testing your theme.
Use Cases
- Rapid prototyping – Designers can experiment with brand colors and typography without writing Tailwind code manually.
- Team hand‑off – Exported configuration files can be shared with developers, ensuring design fidelity across the codebase.
- Theme marketplaces – Creators can build and sell custom shadcn/ui themes by leveraging the visual editor for quick iteration.
- Open‑source contributions – Contributors can generate consistent theme files for community‑driven UI kits.
Frequently Asked Questions
Q: Do I need a Tailwind license to use tweakcn? A: No. Tailwind CSS is open‑source and the editor only generates configuration files that you can use in any project.
Q: Can I import an existing Tailwind config? A: Yes. Use the “Import” button to load a JSON or JS config, then continue editing within the UI.
Q: Is the tool free? A: The core editor is free to use. Advanced export formats and team collaboration features are available under a paid plan.
Q: Does tweakcn support other component libraries? A: Currently it focuses on shadcn/ui, but the architecture allows future extensions for other Tailwind‑based UI kits.
Q: How does dark mode work? A: You can define separate color palettes for light and dark themes. The preview pane includes a toggle to switch between them instantly.
Getting Started
- Visit https://tweakcn.com.
- Choose a base palette or start from scratch.
- Adjust tokens using sliders, color pickers, or numeric inputs.
- Preview changes on the component sandbox.
- Export the Tailwind configuration and integrate it into your project.
With tweakcn, creating polished, brand‑consistent UI themes for shadcn/ui becomes a drag‑and‑drop experience, letting you focus on design rather than boilerplate code.
