Component library

Showing 3 components in the finance deck with role timeline.

  • <NextThirtyDays>

    financeListTimelinePresentation

    Ordered list of dated commitments for the coming month.

    When to use: Delivery cadence or milestone preview on project update decks.

    Preview

    Next 30 days

    1. Week 1Freeze scope for pilot A.
    2. Week 2Integration test with sandbox ERP.
    3. Week 4Go / no-go for production cutover.
    PropTypeNotes
    titlestringOptional. Default: Next 30 days. Slide heading.
    items{ date: string; text: string }[]Required. `date` is a short label (e.g. "12 Jun" or "Week 2"); `text` is the commitment.

    Examples

    <NextThirtyDays
  items={[
    { date: "Week 1", text: "Freeze scope for pilot A." },
    { date: "Week 2", text: "Integration test with sandbox ERP." },
    { date: "Week 4", text: "Go / no-go for production cutover." },
  ]}
/>

  • <ProjectGantt>

    financeTimelineDataPresentation

    Professional week-indexed Gantt: time axis with gridlines, status-coloured bars with an optional inner progress fill, milestone markers, optional phase grouping, and a "today" marker. Bars scale in on slide enter (client).

    When to use: High-level delivery plan or roadmap when you need a real time-scaled Gantt view (not just a phased list) without external chart libraries. Use `groups` instead of `rows` once you have more than about five workstreams, so they read as waves/phases rather than one long list.

    Often with: RoadmapTimelineProcessSteps

    Preview

    Delivery plan

    Week 0 – 15 · 16 weeks

    W0W3W6W9W12W16

    Wave 1: Foundations

    Discovery

    Discovery

    Build

    Sprint 1–4

    Wave 2: Rollout

    UAT

    UAT

    Go-live

    Hypercare
    DoneIn progressAt riskPlannedToday
    PropTypeNotes
    titlestringOptional. Default: Delivery plan. Slide heading.
    totalWeeksnumberOptional. Default: 12. Timeline length; indices run 0 … totalWeeks - 1.
    unitLabelstringOptional. Default: "Week". Axis unit noun used in tick labels (first letter, e.g. "W3") and the caption. Use "Sprint" or "Month" for other cadences.
    rows{ trackLabel: string; segments: GanttSegment[]; milestones?: { label: string; week: number }[] }[]Optional. Flat swimlane rows (ignored when `groups` is set). GanttSegment = { label, startWeek, durationWeeks, status?: "done" | "active" | "planned" | "at-risk", progressPct?: number }.
    groups{ groupLabel: string; rows: GanttRow[] }[]Optional. Rows organised into labelled phases/waves (e.g. "Wave 1: Foundations"), each with its own heading. Preferred over `rows` for plans with more than ~5 workstreams.
    todayWeeknumberOptional. 0-based week to draw a vertical "today" marker through every row.
    showLegendbooleanOptional. Default: true. Show the status-colour legend below the chart. Only renders when more than one status is actually used.
    tweenobjectOptional. Optional subset for the bar/milestone tween: duration, ease, stagger, delay (see sanitize allowlist).

    Examples

    <ProjectGantt
  title="Delivery plan"
  totalWeeks={16}
  todayWeek={5}
  groups={[
    {
      groupLabel: "Wave 1: Foundations",
      rows: [
        {
          trackLabel: "Discovery",
          segments: [{ label: "Discovery", startWeek: 0, durationWeeks: 3, status: "done" }],
        },
        {
          trackLabel: "Build",
          segments: [{ label: "Sprint 1–4", startWeek: 2, durationWeeks: 6, status: "active", progressPct: 55 }],
          milestones: [{ label: "Design freeze", week: 4 }],
        },
      ],
    },
    {
      groupLabel: "Wave 2: Rollout",
      rows: [
        {
          trackLabel: "UAT",
          segments: [{ label: "UAT", startWeek: 8, durationWeeks: 3, status: "planned" }],
        },
        {
          trackLabel: "Go-live",
          segments: [{ label: "Hypercare", startWeek: 11, durationWeeks: 2, status: "at-risk" }],
          milestones: [{ label: "Go-live", week: 11 }],
        },
      ],
    },
  ]}
/>

  • <LiquiditySchedule>

    financeTimelineDataPresentation

    Upcoming capital calls and distributions with date, type chip, optional note, and amount; rows stagger in on slide enter (client).

    When to use: Use to give LPs visibility on the next 4-8 expected cash movements. Pre-format amounts with the fund's sign convention.

    Preview

    Liquidity schedule

    1. 12 Jun 2026CallWave 2 build-out.£18m
    2. 30 Jun 2026DistributionLumen Health partial exit.£24m
    3. 30 Sep 2026CallBolt-on completion.£8m
    PropTypeNotes
    titlestringOptional. Default: Liquidity schedule. Slide heading.
    items{ date: string; type: "call" | "distribution"; amount: string; note?: string }[]Required. Liquidity events in chronological order.
    tweenobjectOptional. Optional GSAP vars for the row entrance.

    Examples

    <LiquiditySchedule
  items={[
    { date: "12 Jun 2026", type: "call", amount: "£18m", note: "Wave 2 build-out." },
    { date: "30 Jun 2026", type: "distribution", amount: "£24m", note: "Lumen Health partial exit." },
    { date: "30 Sep 2026", type: "call", amount: "£8m", note: "Bolt-on completion." }
  ]}
/>