klyv-ui

Spaced Repetition Flashcards

Component 9

About

A flashcard study component that schedules each card's next review with the SM-2 spaced-repetition algorithm, previewing the interval each grade button would set and charting upcoming reviews.

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

Code

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

Usage.tsx

"use client";

import {
  SpacedRepetition,
  spacedRepetitionCard,
  type SpacedRepetitionCard,
} from "@/components/ui/spaced-repetition";
import { useState } from "react";

// Fixed clock + local synthetic deck, so the schedule renders deterministically.
const NOW = new Date("2024-06-10T09:00:00").getTime();

const INITIAL_DECK: SpacedRepetitionCard[] = [
  spacedRepetitionCard("1", "Capital of Japan?", "Tokyo"),
  spacedRepetitionCard("2", "Chemical formula for water?", "H2O"),
  spacedRepetitionCard("3", 'Author of "1984"?', "George Orwell"),
  spacedRepetitionCard("4", "Largest planet in the solar system?", "Jupiter"),
  spacedRepetitionCard("5", "Approximate speed of light?", "300,000 km/s"),
];

export default function SpacedRepetitionDemo() {
  const [cards, setCards] = useState<SpacedRepetitionCard[]>(INITIAL_DECK);

  return (
    <div className="flex w-full items-center justify-center bg-background p-6 text-foreground">
      <SpacedRepetition cards={cards} onCardsChange={setCards} now={NOW} />
    </div>
  );
}

More by klyv-ui

View all
  • Gantt Chart

    Gantt Chart

    63
  • Klyv Animated Beam

    Klyv Animated Beam

    50
  • Shader Canvas

    Shader Canvas

    49
  • Pareto Chart

    Pareto Chart

    44
  • Gooey Loader

    Gooey Loader

    26
  • Sunburst Chart

    Sunburst Chart

    24
  • Fluid Canvas

    Fluid Canvas

    23
  • Morphing Text

    Morphing Text

    21