Workout Summary Card

Cards 101

About

Workout Summary Card This component is designed to display a detailed summary of a physical activity. It's built with props for easy customization of content, including the main activity, detailed stats, and header actions.

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

Code

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

Usage.tsx

// demo.tsx
import {
  WorkoutSummaryCard,
  StatItem,
} from '@/components/ui/workout-summary-card';
import {
  BarChart3,
  Clock,
  Flame,
  Footprints,
} from 'lucide-react';
import React from 'react';

// Sample data for the demo
const workoutStats: StatItem[] = [
  {
    icon: <BarChart3 className="w-5 h-5" />,
    label: 'Distance',
    value: '13.11',
    unit: 'km',
    bgColor: 'bg-green-100 dark:bg-green-900/50',
    textColor: 'text-green-600 dark:text-green-400',
  },
  {
    icon: <Clock className="w-5 h-5" />,
    label: 'Duration',
    value: '1:10:00',
    unit: '',
    bgColor: 'bg-purple-100 dark:bg-purple-900/50',
    textColor: 'text-purple-600 dark:text-purple-400',
  },
  {
    icon: <Flame className="w-5 h-5" />,
    label: 'Calories Burned',
    value: 940,
    unit: 'kcal',
    bgColor: 'bg-red-100 dark:bg-red-900/50',
    textColor: 'text-red-600 dark:text-red-400',
  },
  {
    icon: <Footprints className="w-5 h-5" />,
    label: 'Steps',
    value: 16000,
    unit: '',
    bgColor: 'bg-yellow-100 dark:bg-yellow-900/50',
    textColor: 'text-yellow-600 dark:text-yellow-400',
  },
];

const WorkoutSummaryCardDemo = () => {
  return (
    <div className="flex items-center justify-center min-h-screen bg-background p-4">
      <WorkoutSummaryCard
        date="Sun, Feb 5, 18:14"
        activity="Running"
        equipment="Performed on MyRun Treadmill"
        imageUrl="https://cdn.21st.dev/assets/mirror/50/50d7f3202c059bf17c064b6223924575b0f629ff723f32d9a5eac77968239316.jpg"
        avgSpeed="11.2 km/h"
        avgIncline="0%"
        stats={workoutStats}
        onLike={() => console.log('Liked!')}
        onDelete={() => console.log('Deleted!')}
        onClose={() => console.log('Closed!')}
      />
    </div>
  );
};

export default WorkoutSummaryCardDemo;