mirror of
https://github.com/jnsahaj/tweakcn.git
synced 2026-09-01 15:37:45 +08:00
Sahaj Jain
4d70e2d26c
This commit introduces Zustand for managing the state of the editor components, specifically for button and theme states. It refactors the Editor component to utilize the new store, enhancing state management and improving code organization. Additionally, it updates the package dependencies to include Zustand.
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
uifolder - 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
- 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.
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.