Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Customize Your UI in Real-Time with Shadcn/UI Theme Creator for Chrome
https://github.com/felipebarcelospro/shadcn-theme-creator-for-chrome

nextjs react shadcn-ui tailwind

Last synced: 6 days ago
JSON representation

Customize Your UI in Real-Time with Shadcn/UI Theme Creator for Chrome

Awesome Lists containing this project

README 

        



# 🎨 Shadcn/UI Theme Creator for Chrome



[INSERT COVER IMAGE HERE]



[![Version](https://img.shields.io/badge/version-1.0.0-blue.svg?cacheSeconds=2592000)](https://github.com/felipebarcelospro/shadcn-theme-creator-for-chrome)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)



**Boost productivity and create stunning Shadcn/UI UI themes in real-time. Customize, preview, and export with ease using our Chrome extension.**



[Report Bug](https://github.com/felipebarcelospro/shadcn-theme-creator-for-chrome/issues) | [Request Feature](https://github.com/felipebarcelospro/shadcn-theme-creator-for-chrome/issues)






---



## 📖 Table of Contents



- [About The Project](#-about-the-project)

- [Features](#-features)

- [Built With](#-built-with)

- [Getting Started](#-getting-started)

  - [Prerequisites](#prerequisites)

  - [Installation](#installation)

- [Usage](#-usage)

- [Roadmap](#-roadmap)

- [Contributing](#-contributing)

- [License](#-license)

- [Contact](#-contact)

- [Acknowledgements](#-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](https://reactjs.org/)

- [TypeScript](https://www.typescriptlang.org/)

- [Shadcn/UI UI](https://ui.shadcn.com/)

- [Chrome Extension API](https://developer.chrome.com/docs/extensions/)

- [Webpack](https://webpack.js.org/)



---



## 🚀 Getting Started



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



### Prerequisites



- npm

  ```sh

  npm install npm@latest -g

  ```



### Installation



1. Clone the repo

   ```sh

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

   ```

2. Install NPM packages

   ```sh

   npm install

   ```

3. Build the extension

   ```sh

   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](https://github.com/felipebarcelospro/shadcn-theme-creator-for-chrome/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](https://twitter.com/feldbarcelospro) - [email protected]



Project Link: [https://github.com/felipebarcelospro/shadcn-theme-creator-for-chrome](https://github.com/felipebarcelospro/shadcn-theme-creator-for-chrome)



---



## 🙏 Acknowledgements



- [Shadcn/UI UI](https://ui.shadcn.com/)

- [React](https://reactjs.org/)

- [TypeScript](https://www.typescriptlang.org/)

- [Chrome Extension Documentation](https://developer.chrome.com/docs/extensions/)

- [Best-README-Template](https://github.com/othneildrew/Best-README-Template)



---






Made with ❤️ by [Felipe Barcelos](https://github.com/felipebarcelospro)



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