Next Raise Paywall

Component

About

Value-led ATS upgrade paywall (light theme). variant=full|value-only (intent-gen arm routes to a pricing page); configurable score, plans, issues, features and testimonial. Single dep: framer-motion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Next Raise Paywall to your project and fits it to your theme.

Code

How Next Raise Paywall is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { useState } from "react";
import NextRaisePaywall from "@/components/ui/nextraisepaywall";

/**
 * 21st preview story. Toggle between the two arms the team is A/B-ing:
 *  - "full"        conversion happens in the modal (price inline)
 *  - "value-only"  intent-gen popup, CTA routes to the central pricing page
 * The component is a fixed overlay, so one arm renders at a time; the pill
 * switcher (top center) flips arms and remounts to replay the entrance.
 */
export default function NextRaisePaywallDemo() {
  const [variant, setVariant] = useState<"full" | "value-only">("full");

  return (
    <div style={{ position: "relative", minHeight: "100vh", background: "oklch(0.965 0.008 264)" }}>
      {/* faux app context */}
      <div aria-hidden style={{ position: "fixed", inset: 0, filter: "blur(2px)", opacity: 0.5 }}>
        <div style={{ position: "absolute", top: 0, left: 0, bottom: 0, width: 220, background: "#fff", borderRight: "1px solid #e6e8ee" }} />
        <div style={{ position: "absolute", top: 36, left: 256, right: 36, height: 110, borderRadius: 16, background: "#fff", border: "1px solid #eceef3" }} />
        <div style={{ position: "absolute", top: 170, left: 256, width: "44%", height: 230, borderRadius: 16, background: "#fff", border: "1px solid #eceef3" }} />
      </div>

      {/* arm switcher */}
      <div style={{ position: "fixed", top: 16, left: "50%", transform: "translateX(-50%)", zIndex: 60, display: "flex", gap: 4, padding: 4, borderRadius: 999, background: "#fff", border: "1px solid oklch(0.45 0.05 264 / 0.16)", boxShadow: "0 8px 24px -12px oklch(0.42 0.06 264 / 0.4)", fontFamily: "'Plus Jakarta Sans',system-ui,sans-serif" }}>
        {(["full", "value-only"] as const).map((v) => (
          <button
            key={v}
            onClick={() => setVariant(v)}
            style={{
              border: 0, cursor: "pointer", padding: "7px 14px", borderRadius: 999, fontSize: 12.5, fontWeight: 600,
              fontFamily: "inherit",
              background: variant === v ? "oklch(0.40 0.16 278)" : "transparent",
              color: variant === v ? "#fff" : "oklch(0.45 0.04 266)",
            }}
          >
            {v === "full" ? "Full (price inline)" : "Value-only (→ pricing)"}
          </button>
        ))}
      </div>

      <NextRaisePaywall
        key={variant}
        variant={variant}
        onUnlock={(id) => console.log("checkout:", id)}
        onViewPlans={() => console.log("route -> /pricing")}
        onClose={() => console.log("close")}
        onApplyReferral={(code) => console.log("referral:", code)}
      />
    </div>
  );
}

Dependencies

framer-motion