{"id":14520762,"url":"https://github.com/programming-with-ia/shadcn-theme-editor","last_synced_at":"2025-04-13T04:16:30.582Z","repository":{"id":253008585,"uuid":"840826184","full_name":"programming-with-ia/shadcn-theme-editor","owner":"programming-with-ia","description":"Shadcn Theme Editor is a user-friendly component designed to simplify the process of managing and customizing theme colors in Shadcn-based projects.","archived":false,"fork":false,"pushed_at":"2025-02-09T20:06:33.000Z","size":1483,"stargazers_count":167,"open_issues_count":4,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-13T04:16:15.549Z","etag":null,"topics":["colord","colorful","customization","next-themes","personlization","shadcn-theme","shadcn-theme-customizer","shadcn-theme-editor","shadcn-themes","shadcn-ui","theme","theme-customizer","theme-editor","ui-theme"],"latest_commit_sha":null,"homepage":"https://shadcnthemeeditor.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/programming-with-ia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-10T19:58:04.000Z","updated_at":"2025-04-07T19:10:44.000Z","dependencies_parsed_at":"2025-01-28T01:34:55.851Z","dependency_job_id":"efbdaa3e-8066-4b49-996a-d5bd5caac0f1","html_url":"https://github.com/programming-with-ia/shadcn-theme-editor","commit_stats":null,"previous_names":["programming-with-ia/shadcn-theme-editor"],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/programming-with-ia%2Fshadcn-theme-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/programming-with-ia%2Fshadcn-theme-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/programming-with-ia%2Fshadcn-theme-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/programming-with-ia%2Fshadcn-theme-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/programming-with-ia","download_url":"https://codeload.github.com/programming-with-ia/shadcn-theme-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248661716,"owners_count":21141451,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["colord","colorful","customization","next-themes","personlization","shadcn-theme","shadcn-theme-customizer","shadcn-theme-editor","shadcn-themes","shadcn-ui","theme","theme-customizer","theme-editor","ui-theme"],"created_at":"2024-09-04T05:00:57.208Z","updated_at":"2025-04-13T04:16:30.528Z","avatar_url":"https://github.com/programming-with-ia.png","language":"TypeScript","funding_links":[],"categories":["Apps"],"sub_categories":["Colors and Customizations"],"readme":"\u003cdiv align=\"center\"\u003e\n\u003ch1 align=\"center\"\u003eShadcn Theme Editor\u003c/h1\u003e\n\u003ch3\u003eEffortless Shadcn Theme Customization Made Simple.\u003c/h3\u003e\n\u003ch5\u003e◦ Manage Shadcn theme colors with an intuitive UI.\u003c/h5\u003e\n\n\u003cp align=\"center\"\u003e\n\n![Next.js](https://img.shields.io/badge/Next.js-000000.svg?style\u0026logo=Next.js\u0026logoColor=white)\n![React](https://img.shields.io/badge/React-61DAFB.svg?style\u0026logo=React\u0026logoColor=black)\n![TypeScript](https://img.shields.io/badge/TypeScript-3178C6.svg?style\u0026logo=TypeScript\u0026logoColor=white)\n\n\u003c/p\u003e\n\n![git-last-commit](https://img.shields.io/github/last-commit/programming-with-ia/shadcn-theme-editor)\n![GitHub commit activity](https://img.shields.io/github/commit-activity/m/programming-with-ia/shadcn-theme-editor)\n![GitHub top language](https://img.shields.io/github/languages/top/programming-with-ia/shadcn-theme-editor)\n\n![minified size](https://badgen.net/bundlephobia/min/shadcn-theme-editor@latest)\n\n[![NPM Version](https://img.shields.io/npm/v/shadcn-theme-editor?logo=npm)](https://www.npmjs.com/package/shadcn-theme-editor)\n[![GitHub](https://img.shields.io/badge/shadcn_theme_editor-161b22?logo=github)](https://github.com/programming-with-ia/shadcn-theme-editor)\n\n\u003c/div\u003e\n\n---\n\n## 📍 Overview\n\nShadcn Theme Editor is a user-friendly component designed to simplify the process of managing and customizing theme colors in Shadcn-based projects. This package provides an intuitive UI with buttons for different color properties, allowing developers to easily adjust and preview theme colors in real-time. Although the package is optimized for ease of use, its build size is substantial, so it is recommended to install it as a development dependency. This tool empowers developers to create consistent, visually appealing themes without diving into complex CSS, making it an essential addition to your Shadcn toolkit.\n\n---\n\n## 🚀 Getting Started\n\n### Installation\n\nTo install the package as a development dependency, use one of the following commands:\n\n**npm:**\n\n```sh\nnpm install shadcn-theme-editor --save-dev\n```\n\n```sh\nyarn add shadcn-theme-editor --dev\n```\n\n```sh\npnpm add shadcn-theme-editor --save-dev\n```\n\n---\n\n## 📖 Usage\n\n**import default and add in `app/layout.tsx` file**\n\n\u003c!-- \n\u003e **Tip**  \n\u003e It is preferable to use this component within the `ThemeProvider`, as follows:\n`import { ThemeProvider } from 'next-themes';` --\u003e\n\n```tsx\nimport ShadcnThemeEditor from \"shadcn-theme-editor\";\n```\n\nor (in this way, it doesn't include the component in the production build)\n\n```tsx\nlet ShadcnThemeEditor: any;\nif (process.env.NODE_ENV === 'development') {\n  import('shadcn-theme-editor').then(module =\u003e {\n    ShadcnThemeEditor = module.default; // or module, depending on the module's export\n  });\n} else {\n  // eslint-disable-next-line react/display-name\n  ShadcnThemeEditor = ()=\u003enull\n}\n```\n\nand use\n\n```tsx\n\u003cShadcnThemeEditor /\u003e\n```\n\n\u003c/br\u003e\n\n# Screenshots\n\n\u003cp align=\"center\"\u003e\n  \u003cimg align=\"center\" src=\"https://raw.githubusercontent.com/programming-with-ia/shadcn-theme-editor/master/screenshots/shadcn-theme-editor.png\" alt=\"logo\"\u003e\n\u003c/p\u003e\n\n## [How to Use the UI](usage.md)\n[usage.md](usage.md)\n\n## Upcoming Features\n\n- use [jln themes](https://ui.jln.dev/) directly in your project\n\n## Special Thanks\n\nI would like to extend my heartfelt thanks to the following individuals and projects:\n\n- **[Julian](https://github.com/jln13x)** - for creating [ui.jln.dev](https://ui.jln.dev/), 10000+ Themes for shadcn/ui.\n\n## 📄 License\n\nThis project is licensed under the `ℹ️ MIT` License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprogramming-with-ia%2Fshadcn-theme-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprogramming-with-ia%2Fshadcn-theme-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprogramming-with-ia%2Fshadcn-theme-editor/lists"}