Color Palette

Cards 143

About

Branding Card A visually polished card to showcase brand typography and color palettes, featuring fluid animations.

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

Code

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

Usage.tsx

// demo.tsx
import { BrandingCard } from "@/components/ui/color-palette"; // Adjust the import path

const BrandingCardDemo = () => {
  const brandColors = ["#2A2A2A", "#5D4435", "#A5B592", "#F0F0E6"];

  return (
    <div className="flex h-full w-full items-center justify-center bg-background p-10">
      <BrandingCard
        category="Branding"
        title="Typography"
        subtitle="SF Pro"
        displayElement={
          <span>
            Aa<span className="text-muted-foreground/50">Bb</span>
          </span>
        }
        colors={brandColors}
      />
    </div>
  );
};

export default BrandingCardDemo;