Components
Loading preview...
Animated Steps Tracker Card This component provides a visually engaging way to display step-count data for a given period. It features a fluid counter animation for the total steps and a staggered bar chart animation, making data presentation dynamic and modern. It is fully themeable using shadcn/ui CSS variables.
@lavikatiyar
npx shadcn@latest add https://21st.dev/r/lavikatiyar/card-6// demo.tsx
import React from 'react';
import { Footprints } from 'lucide-react'; // Using lucide-react for the icon
import { MinimalStepsCard } from '@/components/ui/card-6';
// Generate some sample data to populate the chart
const generateSampleData = (days: number) => {
return Array.from({ length: days }, () => ({
value: Math.floor(Math.random() * 20000) + 1000, // Steps between 1k and 21k
}));
};
const MinimalStepsCardDemo = () => {
// Generate data for 45 bars to fill the space nicely
const chartData = generateSampleData(45);
const totalSteps = chartData.reduce((sum, day) => sum + day.value, 0);
return (
<div className="flex h-screen w-full items-center justify-center bg-background p-4">
<MinimalStepsCard
title="Monthly Steps"
subtitle="January 2025"
totalSteps={294944} // Using the number from the image for visual consistency
icon={<Footprints className="h-5 w-5 text-muted-foreground" />}
data={chartData}
/>
</div>
);
};
export default MinimalStepsCardDemo;