tweakcn

A visual editor for shadcn/ui components. Currently in beta with button component support.

About

Websites made with shadcn/ui famously look the same. tweakcn is a tool that helps you customize shadcn/ui components visually, to make your components stand-out. Currently in beta, only starting with the button component. Support for all other shadcn/ui components will be added in future releases.

Current Features

• Visual button customizer with real-time preview
• Full control over:
  • Colors (background, text, border)
  • Dimensions (padding, border radius)
  • Typography (font size, weight, transform)
  • Effects (shadow, transitions)
  • States (hover, focus, active)
• Export to multiple formats:
  • React component
  • CSS
  • Tailwind config
  • ShadCN config
• Responsive design with mobile support

Roadmap

• Add support to import ui folder
• Add support for all ShadCN components
• Add component templates
• Add theme support
• Add component library export
• Add collaboration features

Getting Started

Prerequisites

• Node.js 18+
• npm / yarn / pnpm

Installation

1. Clone the repository:

git clone https://github.com/jnsahaj/tweakcn.git
cd tweakcn

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open http://localhost:8080 in your browser.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.