Pricing Page React block for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Pricing Page is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import PricingPage from @/components/blocks/pricing-page.

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

import Link from "next/link"
import { useRouter } from "next/navigation"
import { PricingPage } from "@/components/blocks/pricing-page"

export default function PricingRoute() {
  const router = useRouter()
  return (
    <PricingPage
      linkComponent={Link}
      defaultPeriod="yearly"
      onSelectPlan={(planId, period, currency) =>
        router.push(`/sign-up?plan=${planId}&period=${period}&currency=${currency}`)
      }
    />
  )
}

Props

• plans
  PricingPlan[]

  The plans, priced in USD per user per month; defaults to PRICING_PAGE_SAMPLE.plans (Free, Start, Pro featured, Business).

• comparison
  PricingComparisonGroup[]

  The comparison table below the plans; defaults to PRICING_PAGE_SAMPLE.comparison (5 groups, 24 rows).

• faqs
  PricingFaq[]

  { question, answer } pairs for the FAQ accordion; links inside answers are underlined. Defaults to PRICING_PAGE_SAMPLE.faqs (8 questions).

• testimonials
  PricingTestimonial[]

  { quote, name, role, company, avatar? } cards; defaults to PRICING_PAGE_SAMPLE.testimonials (3 quotes).

• logos
  string[]

  Customer wordmarks under the plans; defaults to PRICING_PAGE_SAMPLE.logos.

• labels
  Partial<PricingPageLabels>

  Every visible string (English by default, DEFAULT_PRICING_PAGE_LABELS). labels.pricingTable passes strings to the plans table.

• hrefs
  Partial<PricingPageHrefs>

  Where the header, the closing band and the FAQ link go: home, current (the nav link marked current), signIn, signUp, demo, contact.

• period
  "monthly" | "yearly"

  Controlled billing period; pair it with onPeriodChange.

• defaultPerioddefault "yearly"
  "monthly" | "yearly"

  The billing period the page opens on while uncontrolled.

• onPeriodChange
  (period: BillingPeriod) => void

  Called when the period switch changes.

• currencydefault "USD"
  string

  The currency the page opens on; the switch changes it afterwards.

• currenciesdefault "["USD", "EUR"]"
  string[]

  The options of the currency switch; a single entry hides it.

• eurRatedefault 1.08
  number

  Units of the base currency per euro for the conversion; euro prices round to whole euros per plan.

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

  The page's look. classic is the original page; bold has heavy display type over a grid page background with a tinted logo band, an inverted featured plan with a strong ring, 28px cards, larger prices, FAQ cards and a full-width closing band.

• featuredStyledefault "raised"
  "raised" | "outline" | "inverted"

  How the featured plan stands out, passed to PricingTable. Applies to the classic design; bold always inverts it.

• backgrounddefault "glow"
  "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: glow; bold: grid).

• 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 logo band (classic: muted; bold: tinted). 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.

• mobileLayoutdefault "carousel"
  "carousel" | "stack"

  Plans on phones: a swipeable carousel that starts on the featured plan, or a plain stack.

• showComparisondefault true
  boolean

  The full comparison under the plans.

• showLogosdefault true
  boolean

  The customer wordmarks band.

• showTestimonialsdefault true
  boolean

  The three customer quotes.

• showFaqdefault true
  boolean

  The FAQ section.

• showCtadefault true
  boolean

  The closing call to action band.

• headerdefault true
  boolean

  The sticky marketing header with its phone menu; turn it off when the page sits in a site layout.

• footerdefault true
  boolean

  The marketing footer with link columns.

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

  The featured plan, its button, the hero glow and the closing band's main action. brand is the marketing orange.

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

  The switches' thumbs and the FAQ's open state.

• radiusdefault "md"
  "sm" | "md" | "lg"

  Surface radius of the plan cards, quote cards and the closing band.

• loadingdefault false
  boolean

  Skeleton plan cards and quotes in the real layout; the switches wait.

• animateIndefault true
  boolean

  Sections rise in once on mount and the closing band as it scrolls into view; off in thumbnails.

• localedefault "en-US"
  string

  Intl locale for the prices.

• onSelectPlan
  (planId: string, period: BillingPeriod, currency: string) => (void | Promise<unknown>)

  A plan's action; a returned promise keeps its button loading. Without it the page waits 900 ms and toasts "Pro plan, yearly". A plan's own cta.onClick wins.

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

  The router link used by the header, nav, buttons and footer (next/link in an app).

• className
  string

  Classes for the root.

• classNames
  Partial<Record<PricingPageSlot, string>>

  Classes for header, hero, switches, plans, logos, testimonials, faq, cta and footer.

Parts

FAQ

More React blocks