Color Palette Card

Cards 64

About

A compact, modern card displaying a curated set of harmonious color swatches, perfect for design inspiration and theme selection. Each palette is paired with a save count, making it easy to gauge popularity and engagement—ideal for UI libraries, creative platforms, or style guides.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Color Palette Card to your project and fits it to your theme.

Code

How Color Palette Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ColorPaletteCard } from '@/components/ui/color-palette-card'; // Adjust this import path to match your project structure

/**
 * A demo component to showcase the ColorPaletteCard.
 */
export default function ColorPaletteCardDemo() {
  // Sample data for the color palette
  const palette = {
    colors: ['264653', '2A9D8F', 'E9C46A', 'F4A261', 'E76F51'],
    saves: 53421,
  };

  return (
    <div className="flex min-h-[350px] w-full items-center justify-center bg-background p-4">
      <ColorPaletteCard
        colors={palette.colors}
        statsText={`${palette.saves.toLocaleString()} saves`}
      />
    </div>
  );
}