Tweakcn

Tweakcn is a powerful and intuitive platform designed to streamline the process of theming for web applications built with shadcn/ui and Tailwind CSS. It serves as both a visual theme editor and an advanced AI theme generator, catering to front-end developers, UI/UX designers, and product managers who want to create unique and consistent user interfaces with minimal effort. The tool eliminates the need for manual CSS variable adjustments by providing a real-time preview environment where users can visually tweak every aspect of their components.

With a user-friendly interface, Tweakcn allows for deep customization of colors, typography, spacing, border radius, and shadows. It supports modern color formats like OKLCH and HSL, and is compatible with both Tailwind CSS v3 and v4. One of its standout features is the AI Theme Generator, which can create stunning, ready-to-use themes from simple text prompts or by analyzing an uploaded image, such as a logo or a brand screenshot. This makes it incredibly fast to generate a theme that aligns perfectly with a specific brand identity.

How to use Tweakcn

Using Tweakcn is a straightforward, three-step process designed for maximum efficiency:

1. Select a Starting Point: Users can begin by choosing a theme from a growing library of professional presets, such as 'Modern Minimal', 'Cyberpunk', or 'Vercel'. Alternatively, they can start from a blank slate to build a theme from the ground up.
2. Customize Visually: In the editor, users can access an intuitive control panel to adjust various properties. This includes primary, secondary, and accent colors, as well as specific UI component colors for cards, popovers, and inputs. Typography settings, border radiuses, and other Tailwind properties can be fine-tuned while observing the changes instantly on a comprehensive set of preview components. The built-in contrast checker ensures the design remains accessible.
3. Export and Integrate: Once the theme is perfected, Tweakcn provides the generated Tailwind CSS code. Users can simply copy the CSS variables and paste them directly into their project's global CSS file. For even easier integration, it also offers a Shadcn Registry Command, streamlining the entire workflow.

Core Features of Tweakcn

• AI Theme Generation: Create unique themes in seconds from text prompts (e.g., "a theme inspired by Supabase") or by uploading an image.
• Visual Theme Editor: An intuitive interface for customizing colors, typography, radius, spacing, and shadows with a real-time preview of shadcn/ui components.
• Extensive Presets Library: A wide range of pre-built themes to kickstart the design process.
• Tailwind CSS v3 & v4 Support: Seamlessly switch between different versions of Tailwind CSS and use modern color formats like OKLCH and HSL.
• Accessibility Tools: A built-in contrast checker to ensure designs meet WCAG accessibility standards.
• Code Export: Easily copy generated CSS variables or use the Shadcn Registry Command for quick integration into any shadcn/ui project.
• Save & Share Themes: Users can save their custom themes to their account and share them with their team or the community.
• Open Source: The core tool is open source, promoting transparency and community contributions.

Use Cases for Tweakcn

Tweakcn is ideal for a variety of scenarios, including:

• Rapid Prototyping: Quickly create and test different visual styles for a new web application.
• Brand Alignment: Generate a UI theme that perfectly matches a company's branding by using the AI image-to-theme feature with a logo or brand guide.
• Design System Creation: Establish a consistent and visually appealing design system for a suite of applications.
• Personal Projects: Effortlessly give personal projects a professional and polished look without spending hours on CSS.
• Enhancing Existing Projects: Refresh the look and feel of an existing shadcn/ui application by importing and customizing a new theme.

Advantages of Tweakcn

The primary advantage of Tweakcn is its ability to dramatically accelerate the UI development workflow. It bridges the gap between design and development by providing a visual, no-code-like experience for styling. The AI generation capabilities offer a significant creative boost, allowing for the exploration of unique design directions that might not have been considered otherwise. Furthermore, its focus on accessibility, support for the latest web technologies, and seamless integration make it an indispensable tool for the modern web developer.

Pricing and Plans

Tweakcn operates on a freemium model, making it accessible to everyone.

• Free Plan ($0/month): This plan includes full theme customization, 3 AI-generated themes, the ability to save and share up to 10 themes, theme import/export via CSS, and the contrast checker. No credit card is required.
• Pro Plan ($8/month): This plan includes everything in the Free plan, plus unlimited AI-generated themes, the ability to generate themes from images, saving and sharing unlimited themes, priority support, and the option to save custom fonts and colors.