{"repo":"programming-with-ia/shadcn-theme-editor","free":true,"listed":false,"github":"https://github.com/programming-with-ia/shadcn-theme-editor","clone":"git clone https://github.com/programming-with-ia/shadcn-theme-editor.git","description":"Shadcn Theme Editor is a user-friendly component designed to simplify the process of managing and customizing theme colors in Shadcn-based projects.","language":"TypeScript","stars":199,"topics":["customization","personlization","shadcn-theme","shadcn-ui","theme","ui-theme","shadcn-theme-editor","colord","colorful","next-themes"],"license":"MIT","category":"ui-components","readme_excerpt":"🎨 Shadcn Theme Editor Effortless Shadcn Theme Customization Made Simple Manage Shadcn theme colors with an intuitive UI , adjust styles in real-time, and keep your design consistent without diving into raw CSS. --- --- 📍 Overview The Shadcn Theme Editor is a lightweight component designed to simplify theme customization in Shadcn projects. - 🎛 Visual UI for adjusting theme colors - ⚡ Real-time preview of changes - 🌗 Supports light & dark mode via the html.dark class - 🛠 Works seamlessly with Shadcn components - 📦 Install as a dev dependency (recommended, due to bundle size) This makes it a must-have dev tool for anyone building with shadcn/ui. --- 🚀 Installation There are two ways to install shadcn-theme-editor : 1. Via npm/yarn/pnpm/bun (as a dev dependency) 2. Via Scaflo CLI (copies fully editable components) --- 1️⃣ Install via npm (as a dev dependency) Install the package as a development dependency: --- TailwindCSS : - Tailwind v4 - Tailwind v3 --- 2️⃣ Install via Scaflo CLI The Scaflo CLI installs Shadcn Theme Editor as source components into your project, so you can fully customize them. Follow the CLI prompts to generate and configure the components inside your own codebase. ⚠️ Note for Next.js : Add \"use client\"; to components/shadcn-theme-editor/index.tsx . --- 📖 Usage Import the component and add it to your layout: Load in Development Only Exclude the editor from production builds: and use 🖼️ Screenshots For detailed UI examples, see: usage.md ⚙️ Props Pro","default_branch":null,"files":null,"tree":[],"storefront":"/r/programming-with-ia","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/programming-with-ia/shadcn-theme-editor/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}