ReactLoom
Open or close menu
Browse catalog
Back to blocks
Block•Free

Pricing Plans

A polished pricing section with a free entry plan, monthly and yearly billing, and three comparison cards.

Simple pricing

Plans that scale with your team.

Start free, upgrade when you need more, and save with annual billing.

Save 20% with yearly billing

Start free

10 projects and 2 GB storage included

Pro

For independent builders shipping serious products.

$16per seat / month
  • 100 GB secure storage
  • Unlimited projects
  • Two-factor security

Team

Popular

For teams collaborating across every release.

$38per seat / month
  • Everything in Pro
  • 1 TB team storage
  • Shared workspaces
  • Priority support

Enterprise

For organizations that need control at scale.

Custom
  • Unlimited storage
  • Advanced permissions
  • SAML SSO
  • 24/7 priority support

Overview

About the Pricing Plans

A polished pricing section with a free entry plan, monthly and yearly billing, and three comparison cards. It is delivered as editable TypeScript for React. Tailwind CSS is required because the delivered pricing page JSX uses utility classes. Its focused API can be adapted to your own content and visual system.

Usage

When to use it

  • SaaS landing pages that need to compare individual, team, and enterprise plans clearly.
  • Product pages where a free entry tier and annual discount should support conversion.

What’s included

Files installed with the component

Pricing Plans source

components/pricing-plans.tsx

Editable React and TypeScript component source.

Working example

examples/example.tsx

A minimal import and render example that matches the packaged API.

Installation guide

README.md

Manual ZIP installation, styling, compatibility, asset, and usage notes.

Usage

Import and render

Copy the packaged source to the documented path, then use the public API shown below.

Import
import PricingPlans from "@/components/pricing-plans";
Minimum example
export default function PricingPage() {
  return <PricingPlans />;
}

Props

Component API

The current source has no public props; edit the typed plan data and connect the call-to-action buttons in the source file.

Compatibility

Verified project setup

  • ReactLoom's preview is tested with Next.js 16.3.8 App Router, React 19.2.8, TypeScript 5.9.3, and Tailwind CSS 4.3.3. This describes the store environment, not the product's minimum requirements.
  • This interactive component includes the "use client" directive and must remain behind a Client Component boundary in the Next.js App Router.
  • Tailwind CSS is required because the delivered pricing page JSX uses utility classes.
Images
No image files are included or required by the packaged component.
Fonts
No font files are included. The component uses system font fallbacks unless your app supplies a matching font.

Installation

Add it to your project

Download the Pricing Plans ZIP, place the source file at src/components/pricing-plans.tsx, and copy the example into your own page or feature folder.

Target path

src/components/pricing-plans.tsx

No additional npm runtime packages are required beyond the React host; follow the styling requirements below.

Styling requirements

  • Tailwind CSS is required by the component source.
  • ReactLoom verifies this source with Tailwind CSS 4.3.3; other Tailwind versions have not been verified.
  • Keep the component and example paths in Tailwind's source detection scope.
  • ReactLoom's product-preview-viewport rules are store-only preview adaptations and are not part of the delivered component.
  • For the verified Next.js and Tailwind CSS 4 setup, register @tailwindcss/postcss in postcss.config.mjs.
  • Import tailwindcss from the application's global CSS entry point.