Components
Loading preview...
Highlight Card A visually rich card component designed to draw attention to key metrics or highlights. It features a gradient background with a subtle dot pattern, a distinctive bookmark-style icon holder, and smooth animations powered by framer-motion. The component is fully customizable through props, allowing for easy reuse throughout an application.
@lavikatiyar
npx shadcn@latest add https://21st.dev/r/lavikatiyar/card-5import { HighlightCard } from "@/components/ui/card-5";
import { Star } from "lucide-react"; // Using lucide-react for icons
export default function HighlightCardDemo() {
return (
<div className="flex h-full w-full items-center justify-center bg-background p-4">
<HighlightCard
title="Highlights"
description="You are taking fewer sleeps than you usually do by now"
metricValue="8,3 hours"
metricLabel="Daily average on last month"
buttonText="See All"
onButtonClick={() => alert("'See All' button clicked!")}
icon={<Star className="h-6 w-6" fill="currentColor" />}
/>
</div>
);
}