Editorial Accordion

An editorial list of milestones with a percentage column. Open a row to see its progress in detail.

Preview

Installation

npx shadcn add https://www.reflet.app/r/milestone-editorial-accordion.json

Usage

import { MilestoneEditorialAccordion } from "@/components/ui/milestone-editorial-accordion";

import { MilestoneEditorialAccordion } from "@/components/ui/milestone-editorial-accordion";

const MILESTONES = [
  {
    id: "m1",
    name: "Public Beta Launch",
    emoji: "🚀",
    colorHex: "#0b6e99",
    horizonLabel: "Now",
    horizonShort: "Now",
    targetDate: "Mar 15",
    progress: { total: 8, completed: 5, inProgress: 2, percentage: 63 },
  },
  // ...
];

export function EditorialAccordionDemo() {
  return <MilestoneEditorialAccordion milestones={MILESTONES} />;
}

Features

Each row leads with the completion percentage in a monospaced column.
Milestone names and horizons are set in serif type.
A thin progress bar on every row shows completion at a glance.
Open a row to see a progress ring with completed and in-progress counts. One row is open at a time.