Skip to content

Shadcn Theme Editor is a user-friendly component designed to simplify the process of managing and customizing theme colors in Shadcn-based projects.

Notifications You must be signed in to change notification settings

programming-with-ia/shadcn-theme-editor

Repository files navigation

Shadcn Theme Editor

Effortless Shadcn Theme Customization Made Simple.

◦ Manage Shadcn theme colors with an intuitive UI.

Next.js React TypeScript

git-last-commit GitHub commit activity GitHub top language

minified size

NPM Version GitHub


📍 Overview

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


🚀 Getting Started

Installation

To install the package as a development dependency, use one of the following commands:

npm:

npm install shadcn-theme-editor --save-dev
yarn add shadcn-theme-editor --dev
pnpm add shadcn-theme-editor --save-dev

📖 Usage

import default and add in app/layout.tsx file

import ShadcnThemeEditor from "shadcn-theme-editor";

or (in this way, it doesn't include the component in the production build)

let ShadcnThemeEditor: any;
if (process.env.NODE_ENV === 'development') {
  import('shadcn-theme-editor').then(module => {
    ShadcnThemeEditor = module.default; // or module, depending on the module's export
  });
} else {
  // eslint-disable-next-line react/display-name
  ShadcnThemeEditor = ()=>null
}

and use

<ShadcnThemeEditor />

Screenshots

logo

Upcoming Features

Special Thanks

I would like to extend my heartfelt thanks to the following individuals and projects:

📄 License

This project is licensed under the ℹ️ MIT License.