A Powerful Visual Theme Editor for shadcn/ui components with Tailwind CSS support. Comes with Beautiful theme presets to get started.
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.
- Visual theme customizer with real-time preview
- Visual advanced 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 Code:
- React component
- CSS (for tailwind)
- Add global theme editor with presets
- Add advanced customization support for shadcn/ui components
- Button
- Input
- Select
- ...and more
- Add support to import/export themes
- Add collaboration features
- Node.js 18+
- npm / yarn / pnpm
- Clone the repository:
git clone https://github.com/jnsahaj/tweakcn.git
cd tweakcn- Install dependencies:
npm install- Start the development server:
npm run dev- Open http://localhost:8080 in your browser.
Contributions are welcome! Please feel free to submit a Pull Request.