Components
Loading preview...
Spending Limit Card A responsive card component that displays a spending limit with an animated, segmented progress bar.
@lavikatiyar
npx shadcn@latest add https://21st.dev/r/lavikatiyar/card-8import { SpendingLimitCard } from "@/components/ui/card-8";
/**
* A demo component showcasing how to pass custom color classes
* to the SpendingLimitCard.
*/
const SpendingLimitCardDemo = () => {
return (
<div className="flex h-full w-full flex-col items-center justify-center gap-8 bg-background p-4 md:flex-row md:items-start">
{/* Example 1: Using default colors (no color props passed) */}
<SpendingLimitCard
title="Groceries Budget"
dateRange="Data from 1-17 Sep, 2025"
buttonText="View Report"
currentSpending={252.98}
limit={1200}
// Define any valid Tailwind classes here
filledColorClass="bg-green-500"
unfilledColorClass="bg-green-500/20"
onButtonClick={() => alert("Custom color card report clicked!")}
/>
</div>
);
};
export default SpendingLimitCardDemo;