tweakcn
A specialized visual theme builder for shadcn/ui, offering effortless customization of Tailwind CSS themes with live previews and instant code export capabilities for seamless integration.
Visit Website
Introduction
What is tweakcn?
tweakcn is an online theme customization platform built for the shadcn/ui React component library. It empowers developers and designers to visually tailor component appearances by modifying colors, fonts, spacing, and other Tailwind CSS attributes, with changes reflected instantly. The tool is compatible with Tailwind CSS versions 3 and 4, provides a selection of elegant pre-built themes, and produces CSS code ready for immediate use in projects. Its user-friendly interface eliminates the need for manual coding, making it simple to craft distinctive themes that enhance shadcn/ui components.
Key Features
Real-Time Visual Customization
See immediate updates to colors, typography, spacing, and other style attributes applied to shadcn/ui components as you adjust them.
Support for Tailwind CSS v3 & v4
Easily toggle between Tailwind versions, with support for various color formats such as OKLCH and HSL.
Beautiful Theme Presets
Choose from an expanding collection of professionally designed themes for both light and dark modes to jumpstart your customization process.
Code Generation
Export and copy the generated Tailwind CSS code for straightforward implementation in React or Next.js projects utilizing shadcn/ui.
Advanced Style Controls
Precisely adjust border radius, shadows, spacing, typography, and other Tailwind properties to achieve a unique visual identity.
No Signup Required
Begin designing themes right away without any registration, ensuring a quick and hassle-free start.
Use Cases
Rapid Prototyping : Accelerate design cycles by visually editing themes and seeing instant previews, bypassing the need for manual CSS writing.
UI Theme Customization : Enable developers and designers to efficiently create and adapt themes, giving shadcn/ui-based applications a unique look and feel.
Tailwind CSS Learning : Provide an interactive environment for those new to Tailwind CSS to explore how different properties affect styling.
Dark and Light Mode Design : Simplify the creation and switching between light and dark themes to maintain visual consistency across interface modes.
