Impact Page React template for Tailwind CSS v4

Add to a project

Pro item: the CLI needs a Pro account. See plans

Usage

Import ImpactPage from @/components/templates/impact-page.

// app/(marketing)/impact/page.tsx
"use client"

import Link from "next/link"
import { ImpactPage } from "@/components/templates/impact-page"

export default function ImpactRoute() {
  return (
    <ImpactPage
      linkComponent={Link}
      ctaTone="brand"
      onDownload={(href) => {
        window.open(href, "_blank")
      }}
    />
  )
}

Props

• designdefault "classic"
  "classic" | "editorial" | "minimal"

  The whole page's look. classic: a drawn landscape beside the copy, raised chart cards and gradient bands; editorial: a printed annual report with giant start-aligned type over a landscape panorama, numbered chapters, heavy rules, flat charts, a centered header and footer; minimal: centered and quiet, a small leaf rosette, hairline cards, no bands, a transparent header and a simple footer. ctaProps, headerProps and footerProps still win.

• yeardefault 2026
  number

  The report year in the eyebrow, the announcement and the chart notes.

• headlinesdefault "IMPACT_HEADLINES"
  ImpactHeadline[]

  { id, value, decimals?, prefix?, suffix?, label }: the hero's numbers.

• emissionsdefault "IMPACT_EMISSIONS"
  ImpactEmissionsYear[]

  { year, scope1, scope2, scope3 } in tCO2e per fiscal year: the stacked columns and the climate heading's cut and growth.

• targetPathdefault "IMPACT_TARGET_PATH"
  ImpactTargetPoint[]

  { year, value }: the dashed reduction path; the last point is labeled net zero.

• intensitydefault "IMPACT_INTENSITY"
  ImpactIntensityPoint[]

  { period ("Q1 2022"), value } kg CO2e per active user: the line chart and the hero landscape's ridge.

• energydefault "IMPACT_ENERGY"
  ImpactEnergySource[]

  { id, name, share, note }: the electricity mix donut.

• scope3default "IMPACT_SCOPE3"
  ImpactCategory[]

  { id, name, value }: scope 3 by category in tCO2e.

• nonprofitStatsdefault "IMPACT_NONPROFIT_STATS"
  ImpactNonprofitStats

  { organizations, seats, countries, value }: the program's totals.

• regionsdefault "IMPACT_REGIONS"
  ImpactRegion[]

  { id, name, hubs: { id, city, lon, lat, organizations }[] }: the dot map and its region filter.

• storiesdefault "IMPACT_STORIES"
  ImpactStory[]

  Featured nonprofits with a quote, a metric and a drawn mini app (ui.kind shifts, sites or plan).

• eligibilitydefault "IMPACT_ELIGIBILITY"
  string[]

  The checklist on the application card.

• pillarsdefault "IMPACT_PILLARS"
  ImpactPillar[]

  { id: equity | product | time, title, value, description }: the 1% pledge tiles.

• givingdefault "IMPACT_GIVING"
  ImpactCategory[]

  { id, name, value } cash grants in USD: the proportional bar; the sum is the cash total in the copy.

• headcountdefault 184
  number

  Employees, in the people heading.

• representationdefault "IMPACT_REPRESENTATION"
  ImpactRepresentation[]

  { id, team, share, people }: women and non-binary people per team, against parity.

• paydefault "IMPACT_PAY"
  ImpactPayGap[]

  { id, group, adjusted, unadjusted } cents per dollar: the pay equity dot plot.

• volunteeringdefault "IMPACT_VOLUNTEERING"
  { month: string; hours: number }[]

  Paid volunteer hours per month (yyyy-mm).

• volunteerSharedefault 71
  number

  Percent of employees who took at least one volunteer day.

• peopleNotesdefault "IMPACT_PEOPLE_NOTES"
  string[]

  Numbered methodology footnotes under the people charts.

• openSourcedefault "IMPACT_OPEN_SOURCE"
  ImpactOpenSourceStats

  { repos, contributors, stars, mergedPrs, sponsored }.

• reposdefault "IMPACT_REPOS"
  ImpactRepo[]

  { id, name, description, language, stars, href }: the repository list.

• contributionsdefault "IMPACT_CONTRIBUTIONS"
  ImpactContributionDay[]

  { date, value } merged pull requests per day: the heatmap.

• contributionsEnddefault "2026-09-30"
  string

  The heatmap's last day (yyyy-mm-dd).

• commitmentsdefault "IMPACT_COMMITMENTS"
  ImpactCommitment[]

  { id, title, due, status: done | on-track | at-risk, progress, detail }: the timeline, grouped by year.

• shortfallsdefault "IMPACT_SHORTFALLS"
  ImpactShortfall[]

  { id, title, body, action }: where the company fell short and what changes.

• reportsdefault "IMPACT_REPORTS"
  ImpactReport[]

  { id, year, title, size, format, href }: the archive below this year's report.

• assuranceScopedefault "IMPACT_ASSURANCE_SCOPE"
  string[]

  What the auditor checked, as chips on the assurance card.

• gridRegionsdefault "IMPACT_GRID_REGIONS"
  ImpactGridRegion[]

  { value, label, intensity } kg CO2e per kWh: the calculator's regions.

• calculatorFactorsdefault "IMPACT_CALCULATOR_FACTORS"
  ImpactCalculatorFactors

  The calculator's per-seat assumptions, also printed in its methodology.

• defaultTeamSizedefault 50
  number

  The calculator's team size on load (1 to 500).

• defaultRegiondefault "us"
  string

  The calculator's region on load, a gridRegions value.

• reportHrefdefault "/impact/acme-impact-report-2026.pdf"
  string

  The full report's address, handed to onDownload.

• onDownload
  (href: string) => (void | Promise<unknown>)

  Runs with reportHref on Download the full report (hero, nav and archive). A returned promise keeps the buttons loading; a rejection shows an error. Without it: 900 ms, then a confirmation.

• applyHrefdefault "/contact"
  string

  Where Apply now and the closing band's primary button go.

• headerdefault true
  boolean

  The marketing header; off inside a site layout that has one.

• footerdefault true
  boolean

  The marketing footer.

• showAnnouncementdefault true
  boolean

  The strip above the header bar (labels.announcement).

• showNavdefault true
  boolean

  The sticky chapter nav with the reading progress bar.

• showClimatedefault true
  boolean

  Emissions by scope, intensity per user, electricity mix and scope 3 categories.

• showCalculatordefault true
  boolean

  The carbon calculator for your team.

• showNonprofitsdefault true
  boolean

  Program stats, the dot map, nonprofit stories and the application card.

• showGivingdefault true
  boolean

  The 1% pledge tiles and where the cash went.

• showPeopledefault true
  boolean

  Representation, pay equity, volunteering and the footnotes.

• showOpenSourcedefault true
  boolean

  Open-source stats, the contributions heatmap and the repositories.

• showCommitmentsdefault true
  boolean

  The 2030 commitments timeline.

• showShortfallsdefault true
  boolean

  Where we fell short.

• showAssurancedefault true
  boolean

  The independent assurance statement.

• showArchivedefault true
  boolean

  Past reports and data downloads.

• showCtadefault true
  boolean

  The closing band.

• ctaVariantdefault "inverted"
  "inverted" | "soft" | "split"

  The closing band: a solid band, a gray band, or copy beside the buttons on a raised panel. Applies to the classic design.

• backgrounddefault "aurora"
  "plain" | "soft" | "glow" | "aurora" | "grid" | "dots"

  The main background: plain is the bare page color; the others tint the page and add a glow, an aurora, a grid or dots over the first screen. A design picks its own unless you set one (classic aurora, editorial soft, minimal plain).

• backgroundColordefault "oklch(0.62 0.14 275)"
  string

  The tint and glow color of the main background.

• bandBackgrounddefault "gradient"
  "muted" | "tinted" | "gradient" | "dots"

  The secondary background of the bands. Cards, fields and tiles inside a band are lifted one step above it, so they never share its color.

• bandColordefault "oklch(0.62 0.14 275)"
  string

  The tint of tinted and gradient bands; defaults to backgroundColor.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The active chapter chip, the reading progress bar, the calculator's slider and the eligibility checks (success when neutral).

• ctaTonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Download the full report, Apply now, the header's Get started and the closing band.

• headerProps
  Partial<MarketingHeaderProps>

  Passed to MarketingHeader.

• footerProps
  Partial<MarketingFooterProps>

  Passed to MarketingFooter.

• ctaProps
  Partial<CtaSectionProps>

  Passed to the closing CtaSection, spread last.

• onSubscribe
  (email: string) => (void | Promise<unknown>)

  The footer newsletter; a rejected promise shows an error. Without it: 900 ms, then success.

• animateIndefault true
  boolean

  The headline numbers roll up and the charts grow the first time they scroll into view (never under reduced motion). Everything is final in the server markup.

• localedefault "en-US"
  string

  Intl locale for every number, percent, amount and month.

• linkComponentdefault "<a>"
  (props: LinkComponentProps) => ReactNode

  The router link for every link on the page (next/link in an app).

• labelsdefault "DEFAULT_IMPACT_PAGE_LABELS"
  Partial<ImpactPageLabels>

  Every visible string; {placeholders} are filled from the data.

• className
  string

  Classes for the root.

• classNames
  Partial<Record<ImpactPageSlot, string>>

  Classes for header, hero, art, headlines, nav, chapter, panel, calculator, map, story, commitments, shortfalls, assurance, archive, cta and footer.

Parts