Migration List

Component 7

About

A database migrations panel that lists applied and pending migrations sorted by version and flags any migration applied out of order or marked irreversible.

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

Code

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

Usage.tsx

"use client";

import { MigrationList, type Migration } from "@/components/ui/migration-list";

const NOW = new Date("2026-09-02T08:00:00");
const days = (n: number) => new Date(NOW.getTime() + n * 86_400_000);

const MIGRATIONS: Migration[] = [
  {
    version: "20260714093000",
    name: "create users",
    state: "applied",
    appliedAt: days(-50),
    duration: 84,
  },
  {
    version: "20260801121500",
    name: "add accounts",
    state: "applied",
    appliedAt: days(-32),
    duration: 122,
  },
  {
    version: "20260815090000",
    name: "backfill account_id",
    state: "applied",
    appliedAt: days(-18),
    duration: 41_200,
    irreversible: true,
  },
  {
    version: "20260810140000",
    name: "add sessions index",
    state: "applied",
    appliedAt: days(-12),
    duration: 610,
  },
  {
    version: "20260828101500",
    name: "drop legacy_sessions",
    state: "failed",
    appliedAt: days(-4),
    error:
      "ERROR: cannot drop table legacy_sessions because other objects depend on it",
  },
  { version: "20260901080000", name: "add role default", state: "pending" },
  { version: "20260902093000", name: "add deleted_at", state: "pending" },
];

export default function MigrationListDemo() {
  return (
    <div className="w-full max-w-xl">
      <MigrationList migrations={MIGRATIONS} now={NOW} />
    </div>
  );
}