Card

Cards 202

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Card to your project and fits it to your theme.

Code

How Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// 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;