ColorPalette

The ColorPalette component displays a theme preview with color swatches. It's commonly used for theme selection interfaces.

Import

import { ColorPalette } from "amvasdev-ui";

Examples

Basic Usage

emerald

<ColorPalette theme="emerald" />

Theme Selector

light

dark

cupcake

emerald

dracula

import { useState } from "react";
  import { ColorPalette } from "amvasdev-ui";

  function ThemeSelector() {
    const [selectedTheme, setSelectedTheme] = useState("light");

    const themes = ["light", "dark", "cupcake", "emerald", "dracula"];

    return (
      <div className="flex flex-col gap-2">
        {themes.map((theme) => (
          <ColorPalette
            key={theme}
            theme={theme}
            isSelected={selectedTheme === theme}
            onClick={() => setSelectedTheme(theme)}
            className="cursor-pointer"
          />
        ))}
      </div>
    );
  }