[INSERT COVER IMAGE HERE]
Boost productivity and create stunning Shadcn/UI UI themes in real-time. Customize, preview, and export with ease using our Chrome extension.
- About The Project
- Features
- Built With
- Getting Started
- Usage
- Roadmap
- Contributing
- License
- Contact
- Acknowledgements
[INSERT SCREENSHOT OR GIF HERE]
Shadcn/UI Theme Creator for Chrome is a powerful extension designed to enhance your web development experience with Shadcn/UI UI. This tool allows you to customize themes on websites using Shadcn/UI UI in real-time, providing instant visual feedback and the ability to export your customizations for future use.
- 🚀 Boost Productivity: Quickly iterate through different theme options without changing code.
- 🎨 Visual Customization: Intuitive color pickers for easy theme adjustments.
- 💾 Export & Reuse: Save your custom themes for use across different projects.
- 🔒 Privacy-First: Works locally in your browser, no data sent to external servers.
- 🔍 Automatic Detection: Instantly recognizes Shadcn/UI UI compatible websites, streamlining your workflow.
- 🎨 Intuitive Interface: Easy-to-use color pickers for seamless theme adjustments and customization.
- 👁️ Real-time Preview: Witness changes instantly as you customize, enhancing your design process.
- 💾 Export Themes: Save and reuse your custom themes across multiple projects effortlessly.
- 🚀 Optimized Performance: Built with React and TypeScript for unparalleled speed and reliability.
- 🔒 Privacy-First: All customizations occur locally in your browser, ensuring data privacy.
To get a local copy up and running, follow these simple steps.
- npm
npm install npm@latest -g
- Clone the repo
git clone https://github.com/felipebarcelospro/shadcn-theme-creator-for-chrome.git
- Install NPM packages
npm install
- Build the extension
npm run build
- Load the extension in Chrome:
- Open Chrome and navigate to
chrome://extensions
- Enable "Developer mode"
- Click "Load unpacked"
- Select the
dist
folder from the cloned project
- Open Chrome and navigate to
- Navigate to a website using Shadcn/UI UI
- Click the Shadcn/UI Theme Creator icon in your Chrome toolbar
- Use the color controls to adjust the theme
- See changes in real-time on the website
- Click "Export Theme" to download your customizations
[INSERT USAGE GIF HERE]
See the open issues for a list of proposed features (and known issues).
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
Distributed under the MIT License. See LICENSE
for more information.
Felipe Barcelos - @feldbarcelospro - [email protected]
Project Link: https://github.com/felipebarcelospro/shadcn-theme-creator-for-chrome
Made with ❤️ by Felipe Barcelos
If you found this project helpful, please consider giving it a ⭐️!