Bug Bounty Page React template for Tailwind CSS v4

Add to a project

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

Usage

Import BugBountyPage from @/components/templates/bug-bounty-page.

// app/(marketing)/security/bug-bounty/page.tsx
"use client"

import Link from "next/link"
import { BugBountyPage } from "@/components/templates/bug-bounty-page"

export default function BugBountyRoute() {
  return (
    <BugBountyPage
      linkComponent={Link}
      onSubmitReport={async ({ files, ...values }) => {
        const body = new FormData()
        body.append("report", JSON.stringify(values))
        files.forEach((file) => body.append("files", file))
        const response = await fetch("/api/security/reports", { method: "POST", body })
        if (!response.ok) throw new Error("Could not submit the report")
        const { id } = (await response.json()) as { id: string }
        return id
      }}
    />
  )
}

Props

• designdefault "classic"
  "classic" | "terminal" | "minimal"

  The whole page's look. classic follows the layout props; terminal: a dark monospace page in both themes with $-prefixed eyebrows, a green dotted backdrop, hairline panels, dashed section rules, mono figures and a soft closing band; minimal: a transparent header, a centered hero without the terminal, outlined panels, no bands, a plain closing band and a simple footer. The *Props overrides still win.

• statsdefault "BUG_BOUNTY_STATS"
  BugBountyStat[]

  { id, value, decimals?, prefix?, suffix?, label } numbers under the hero; they roll up once in view.

• rewardsdefault "BUG_BOUNTY_REWARDS"
  BugBountyReward[]

  { severity, min, max, cvssMin, cvssMax, examples } rows of the rewards table, amounts in USD.

• assetTiersdefault "BUG_BOUNTY_ASSET_TIERS"
  BugBountyAssetTier[]

  { tier, label, description, multiplier } tiers; the estimator scales the range by the multiplier.

• assetsdefault "BUG_BOUNTY_ASSETS"
  BugBountyAsset[]

  { id, name, type, tier, notes } in-scope assets, also the form's asset choices.

• outOfScopedefault "BUG_BOUNTY_OUT_OF_SCOPE"
  BugBountyExclusion[]

  { id, title, description } findings that are out of scope.

• rulesdefault "BUG_BOUNTY_RULES"
  BugBountyRule[]

  { id, title, description } numbered rules of engagement.

• timelinedefault "BUG_BOUNTY_TIMELINE"
  BugBountyTimelineStep[]

  { id, title, sla, description } steps of the disclosure timeline.

• researchersdefault "BUG_BOUNTY_RESEARCHERS"
  BugBountyResearcher[]

  { handle, country, points, reports, year } leaderboard entries; country is an ISO code shown as text.

• reportsdefault "BUG_BOUNTY_REPORTS"
  BugBountyDisclosedReport[]

  { id, title, severity, bounty, disclosedAt, researcher, asset, href } recently disclosed reports; disclosedAt is an ISO day.

• vulnerabilityTypesdefault "BUG_BOUNTY_VULNERABILITY_TYPES"
  BugBountyOption[]

  { value, label } choices of the Vulnerability type select.

• programdefault "BUG_BOUNTY_PROGRAM"
  BugBountyProgram

  { email, pgpFingerprint, pgpHref, securityTxtHref, policyHref, reportIdPrefix, firstReportNumber }.

• scenedefault "BUG_BOUNTY_SCENE"
  BugBountyScene

  The strings of the hero's triage terminal: { window, command, reportId, fields, cvss, phases, log }.

• faqdefault "BUG_BOUNTY_FAQ"
  FaqItem[]

  Questions and answers for the FAQ section.

• labelsdefault "DEFAULT_BUG_BOUNTY_PAGE_LABELS"
  Partial<BugBountyPageLabels>

  Every visible string: headings, table headers, estimator options, form fields and errors, success copy.

• heroLayoutdefault "split"
  "split" | "centered"

  The hero copy beside the triage terminal, or centered over it. Applies to the classic design.

• defaultScopeTabdefault "in"
  "in" | "out"

  The scope tab open on load.

• defaultYeardefault 2026
  number

  The leaderboard's year on load; a year without entries falls back to the newest year in researchers.

• maxFileSizedefault 10
  number

  The largest attachment in megabytes; bigger files are flagged and block the submit.

• maxFilesdefault 5
  number

  How many attachments a report can carry.

• onSubmitReport
  (values: BugBountyReportValues) => (string | void | Promise<string | void>)

  Called with { title, asset, vulnerabilityType, severity, steps, impact, files, email, agree } once the form is valid. A returned promise keeps the button loading, a string it resolves to becomes the report ID and a rejection shows labels.failed. Without it the form waits 900 ms and shows the next ID (ACME-H1-2026-0412).

• showStatsdefault true
  boolean

  The program numbers under the hero.

• showJumpLinksdefault true
  boolean

  The row of section chips.

• showRewardsdefault true
  boolean

  The rewards section.

• showEstimatordefault true
  boolean

  The Estimate your reward calculator inside the rewards section.

• showScopedefault true
  boolean

  The in scope / out of scope tabs.

• showRulesdefault true
  boolean

  The rules of engagement and the safe harbor callout.

• showTimelinedefault true
  boolean

  The disclosure timeline.

• showHallOfFamedefault true
  boolean

  The leaderboard section.

• showReportsdefault true
  boolean

  The recently disclosed reports beside the leaderboard.

• showSubmitdefault true
  boolean

  The report form.

• showFaqdefault true
  boolean

  The FAQ section.

• showCtadefault true
  boolean

  The closing band with the security email.

• alternatedefault true
  boolean

  Bands on every other visible section, in the bandBackground look. Applies to the classic design.

• 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, terminal dots, minimal plain.

• backgroundColordefault "oklch(0.62 0.14 275)"
  string

  The tint and glow color of the main background; the terminal design uses a terminal green unless you set one.

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

  The secondary background of the alternating 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"

  Icon tiles, timeline nodes, the top three ranks, the safe harbor badge and the estimator's segmented controls. Severity colors stay fixed.

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

  Get started, both Submit a report buttons and the form's submit; brand is the marketing orange.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  The corners of the form fields, the scope tabs and the segmented controls.

• headerdefault true
  boolean

  The marketing header; off inside a site layout.

• footerdefault true
  boolean

  The marketing footer.

• headerProps
  Partial<MarketingHeaderProps>

  Passed to MarketingHeader.

• footerProps
  Partial<MarketingFooterProps>

  Passed to MarketingFooter.

• heroProps
  Partial<HeroSectionProps>

  Overrides for the HeroSection (media, background...).

• faqProps
  Partial<FaqSectionProps>

  Overrides for the FaqSection (layout, variant...).

• ctaProps
  Partial<CtaSectionProps>

  Overrides for the closing CtaSection (variant, actions...).

• animateIndefault true
  boolean

  The hero rises in, the numbers roll up and the triage terminal plays; false keeps everything still (thumbnails). Reduced motion always does.

• localedefault "en-US"
  string

  Intl locale for the USD amounts, numbers, file sizes and dates (shown in UTC).

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

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

• className
  string

  Classes for the root.

• classNames
  Partial<Record<BugBountyPageSlot, string>>

  Classes for header, hero, stats, jump, rewards, estimator, scope, rules, safeHarbor, timeline, hallOfFame, leaderboard, reports, submit, form, success, faq, cta and footer.

Parts