🎨 Shadcn/UI Theme Creator for Chrome

[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.

Report Bug | Request Feature

---

📖 Table of Contents

• About The Project
• Features
• Built With
• Getting Started
  • Prerequisites
  • Installation
• Usage
• Roadmap
• Contributing
• License
• Contact
• Acknowledgements

---

🌟 About The Project

[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.

Why Shadcn/UI Theme Creator?

• 🚀 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.

---

✨ Features

• 🔍 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.

---

🛠 Built With

• React
• TypeScript
• Shadcn/UI UI
• Chrome Extension API
• Webpack

---

🚀 Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

• npm

  npm install npm@latest -g

Installation

1. Clone the repo

   git clone https://github.com/felipebarcelospro/shadcn-theme-creator-for-chrome.git

2. Install NPM packages

   npm install

3. Build the extension

   npm run build

4. 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

---

💻 Usage

1. Navigate to a website using Shadcn/UI UI
2. Click the Shadcn/UI Theme Creator icon in your Chrome toolbar
3. Use the color controls to adjust the theme
4. See changes in real-time on the website
5. Click "Export Theme" to download your customizations

[INSERT USAGE GIF HERE]

---

🗺 Roadmap

See the open issues for a list of proposed features (and known issues).

---

🤝 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📄 License

Distributed under the MIT License. See LICENSE for more information.

---

📧 Contact

Felipe Barcelos - @feldbarcelospro - [email protected]

Project Link: https://github.com/felipebarcelospro/shadcn-theme-creator-for-chrome

---

🙏 Acknowledgements

• Shadcn/UI UI
• React
• TypeScript
• Chrome Extension Documentation
• Best-README-Template

---

Made with ❤️ by Felipe Barcelos

If you found this project helpful, please consider giving it a ⭐️!