Lesson Summary

Component

About

An end-of-lesson results screen that counts up XP, accuracy and time in three animated tiles and shows the week's streak with a daily goal tracker.

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

Code

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

Usage.tsx

"use client";
import LessonSummary from "@/components/ui/lesson-summary";

export default function LessonSummaryDemo() {
  return (
    <div className="min-h-screen w-full flex items-center justify-center bg-background text-foreground">
      <LessonSummary
        xp={27}
        accuracy={94}
        seconds={104}
        streak={6}
        week={[false, true, true, true, true, true, true]}
        dayLabels={["T", "F", "S", "S", "M", "T", "W"]}
        theme="light"
      />
    </div>
  );
}