Components
Loading preview...
Branding Card A visually polished card to showcase brand typography and color palettes, featuring fluid animations.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/color-palette// 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;