Research Report Page React template for Tailwind CSS v4

Add to a project

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

Usage

Import ResearchReportPage from @/components/templates/research-report-page.

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

import Link from "next/link"
import { ResearchReportPage } from "@/components/templates/research-report-page"

export default function ReportRoute() {
  return (
    <ResearchReportPage
      linkComponent={Link}
      ctaTone="brand"
      onDownload={async (values) => {
        await fetch("/api/report-leads", { method: "POST", body: JSON.stringify(values) })
      }}
    />
  )
}

Props

• designdefault "classic"
  "classic" | "editorial" | "bold"

  The whole page's look. classic: copy, a tilted report cover and a form card side by side, raised chart cards and muted bands over a faint grid; editorial: a printed journal with a masthead, giant start-aligned type, an inline form, numbered ruled findings and flat charts; bold: a deep dark cover band in the page tint with a glowing report, giant numbers on flat tiles and a wordmark footer. ctaProps, headerProps and footerProps still win.

• backgrounddefault "grid"
  "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 uses grid, editorial and bold soft (bold covers it with a dark band in the page tint).

• backgroundColordefault "oklch(0.62 0.14 275)"
  string

  The tint and glow color of the main background.

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

  The secondary background of the alternating bands (classic design). 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.

• reportdefault "REPORT_INFO"
  ReportInfo

  { title, year, subtitle, publisher, volume, published, pages, respondents, countries, marginOfError, fileSize }: the cover, the hero copy and the form.

• headlinesdefault "REPORT_HEADLINES"
  ReportHeadline[]

  { id, value, decimals?, prefix?, suffix?, label }: the strip of survey facts under the hero.

• findingsdefault "REPORT_FINDINGS"
  ReportFinding[]

  { id, value, prefix?, suffix?, title, body, chartTitle, source, chart }: the key findings; chart.type is dots, stack, slope, ranked or likert. They also feed the embed picker.

• cellsdefault "REPORT_CELLS"
  ReportCell[]

  The explorer cube: one cell per industry, size and region with its respondents (n), weekly hours, tools, shares and two histograms. Every view is the respondent weighted average of the matching cells.

• industriesdefault "REPORT_INDUSTRIES"
  ReportOption[]

  { value, label }: the industry filter and the sample chart.

• sizesdefault "REPORT_SIZES"
  ReportOption[]

  { value, label }: the company size segments.

• regionsdefault "REPORT_REGIONS"
  ReportOption[]

  { value, label }: the region filter.

• filters
  ReportExplorerFilters

  { industry, size, region }, each an option value or "all": the explorer's filters, controlled.

• defaultFilters
  Partial<ReportExplorerFilters>

  The explorer's filters on load, uncontrolled; missing keys are "all".

• onFiltersChange
  (filters: ReportExplorerFilters) => void

  Runs when a filter changes or Reset filters is pressed.

• defaultMeetingHoursdefault 10
  number

  Where the Your team meeting hours slider starts (0 to 30).

• defaultToolsdefault 8
  number

  Where the Your team tools slider starts (1 to 20).

• minSampledefault 100
  number

  Explorer views with fewer respondents show a small sample warning.

• quotesdefault "REPORT_QUOTES"
  ReportQuote[]

  { id, quote, role, context }: anonymous respondent quotes; the first is the large one.

• chaptersdefault "REPORT_CHAPTERS"
  ReportChapter[]

  { id, title, summary, page, unlocked?, body?, takeaway? }: the table of contents; unlocked chapters with a body expand inline.

• methoddefault "REPORT_METHOD"
  ReportMethodItem[]

  { id, label, value, detail }: sample, fieldwork, margin of error and weighting.

• authorsdefault "REPORT_AUTHORS"
  ReportAuthor[]

  { id, name, role, bio }: the research team, with initials avatars.

• citationsdefault "REPORT_CITATIONS"
  ReportCitation[]

  { id, label, text }: the citation styles to copy.

• pastReportsdefault "REPORT_PAST"
  ReportPastReport[]

  { id, year, title, headline, pages, href }: earlier editions, each with its own drawn cover.

• briefingdefault "REPORT_BRIEFING"
  ReportBriefing

  { title, start (iso), durationMinutes, timeZone, timeZoneLabel, href }: the live briefing in the announcement, the calendar file and the closing band.

• companySizesdefault "REPORT_COMPANY_SIZES"
  ReportOption[]

  The form's company size options.

• rolesdefault "REPORT_ROLES"
  ReportOption[]

  The form's role options.

• requireWorkEmaildefault true
  boolean

  Turns away personal email addresses (freeEmailDomains) with an error.

• freeEmailDomainsdefault "REPORT_FREE_EMAIL_DOMAINS"
  string[]

  The personal email domains requireWorkEmail rejects.

• reportHrefdefault "/report/acme-state-of-teamwork-2026.pdf"
  string

  The PDF behind Download PDF after the form succeeds.

• pressKitHrefdefault "/report/acme-state-of-teamwork-2026-press-kit.zip"
  string

  The press kit link.

• privacyHrefdefault "/legal/privacy"
  string

  The privacy policy link under the form.

• siteUrldefault "https://acme.com"
  string

  The base url of the embed codes and the calendar file.

• onDownload
  (values: ResearchReportDownloadValues) => (void | Promise<unknown>)

  Runs with { name, email, companySize, role } once the form is valid. A returned promise keeps the button loading; a rejection shows an error. Without it: 900 ms, then the success card.

• coverColordefault "#14213d"
  string

  The drawn report covers' paper color; the cover text turns black or white to match.

• 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 with the briefing date (labels.announcement).

• showHeadlinesdefault true
  boolean

  The survey facts under the hero.

• showFindingsdefault true
  boolean

  The key findings and their charts.

• showExplorerdefault true
  boolean

  The benchmark explorer with filters, KPIs, distributions and the Your team sliders.

• showQuotesdefault true
  boolean

  Respondent quotes.

• showChaptersdefault true
  boolean

  The table of contents with the readable and locked chapters.

• showMethodologydefault true
  boolean

  Sample, fieldwork, margin of error, weighting and the sample composition chart.

• showAuthorsdefault true
  boolean

  The research team and the press contact.

• showPressdefault true
  boolean

  Embed a chart, cite the report and the press kit.

• showArchivedefault true
  boolean

  Past reports.

• showCtadefault true
  boolean

  The closing band.

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

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

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

  The explorer's size segments, sliders and Top N% badges, and the citation style switch.

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

  Download the report, Download PDF, Get the full report, 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 hero rises in once, numbers roll up and 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 and date.

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

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

• labelsdefault "DEFAULT_RESEARCH_REPORT_PAGE_LABELS"
  Partial<ResearchReportPageLabels>

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

• className
  string

  Classes for the root.

• classNames
  Partial<Record<ResearchReportPageSlot, string>>

  Classes for header, hero, cover, form, headlines, findings, finding, panel, explorer, quotes, chapters, methodology, authors, press, archive, cta and footer.

Parts