Components
Loading preview...
Flexible container component for grouping related content and actions.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-cardimport { Card } from "@/components/ui/heroui-card";
const cards = [
{
variant: "transparent" as const,
title: "Transparent",
description: "Minimal prominence with transparent background",
body: "Use for less important content or nested cards",
},
{
variant: "default" as const,
title: "Default",
description: "Standard card appearance (bg-surface)",
body: "The default card variant for most use cases",
},
{
variant: "secondary" as const,
title: "Secondary",
description: "Medium prominence (bg-surface-secondary)",
body: "Use to draw moderate attention",
},
{
variant: "tertiary" as const,
title: "Tertiary",
description: "Higher prominence (bg-surface-tertiary)",
body: "Use for primary or featured content",
},
];
export default function CardVariantsDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<div className="flex flex-col gap-4">
{cards.map((item) => (
<Card className="w-[320px]" key={item.title} variant={item.variant}>
<Card.Header>
<Card.Title>{item.title}</Card.Title>
<Card.Description>{item.description}</Card.Description>
</Card.Header>
<Card.Content>
<p>{item.body}</p>
</Card.Content>
</Card>
))}
</div>
</div>
);
}
export { CardVariantsDemo };