Shadcn-theme-editor NPM

git-last-commit GitHub commit activity GitHub top language

minified size

📍 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