LogoIndieHub
icon of tweakcn

tweakcn

tweakcn is a theme editor and generator for shadcn/ui, supporting Tailwind CSS v4 and custom styles with real-time modification and code generation.

Introduction

tweakcn is a web-based theme editor and generator specifically designed for shadcn/ui, a collection of re-usable UI components for React. It allows users to customize themes visually and obtain the corresponding code for their projects.

Key Features:

  • Interactive Theme Editor: Provides a real-time, visual interface to modify theme properties.
  • Tailwind CSS v4 Support: Compatible with the latest Tailwind CSS version.
  • Custom Style Support: Enables users to incorporate custom styles beyond the default shadcn/ui themes.
  • Real-Time Preview: Changes are reflected instantly, allowing for immediate feedback.
  • Code Generation: Generates the necessary code (CSS variables, Tailwind configuration) based on the customized theme.

Use Cases:

  • Rapid Prototyping: Quickly create and test different theme variations for a project.
  • Design System Customization: Adapt shadcn/ui components to match an existing design system.
  • Personalized UI: Create unique and visually appealing user interfaces.
  • Educational Tool: Learn about theme customization and CSS variables in a practical setting.

Target Users:

  • Frontend developers using React and Tailwind CSS.
  • UI/UX designers seeking to customize shadcn/ui components.
  • Developers looking for a quick and easy way to generate themes for their projects.