Components
Color Palette Card
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.
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>
);
}