https://github.com/jnsahaj/tweakcn
A visual no-code editor for shadcn/ui components
https://github.com/jnsahaj/tweakcn
Last synced: 8 months ago
JSON representation
A visual no-code editor for shadcn/ui components
- Host: GitHub
- URL: https://github.com/jnsahaj/tweakcn
- Owner: jnsahaj
- License: mit
- Created: 2025-03-13T21:53:42.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-03-21T20:34:03.000Z (8 months ago)
- Last Synced: 2025-03-21T21:27:24.448Z (8 months ago)
- Language: TypeScript
- Homepage: https://tweakcn.com
- Size: 1.69 MB
- Stars: 348
- Watchers: 2
- Forks: 17
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- stars - tweakcn - code theme editor for shadcn/ui components | jnsahaj | 7711 | (TypeScript)
- StarryDivineSky - jnsahaj/tweakcn
README
# tweakcn
A Powerful Visual Theme Editor for shadcn/ui components with Tailwind CSS support. Comes with Beautiful theme presets to get started.
## 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 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)
## Roadmap
- [x] 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
## Getting Started
### Prerequisites
- Node.js 18+
- npm / yarn / pnpm
### Installation
1. Clone the repository:
```bash
git clone https://github.com/jnsahaj/tweakcn.git
cd tweakcn
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev
```
4. Open [http://localhost:8080](http://localhost:8080) in your browser.
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.