Subscription Screen

Features 358

About

Subscription Screen A responsive, theme-adaptive subscription screen component designed to present pricing plans and key features in a visually appealing layout. It includes built-in animations and is structured for easy customization through props.

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

Code

How Subscription Screen is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// demo.tsx
import * as React from "react";
import { SubscriptionScreen } from "@/components/ui/subscription-screen";
import { Lock, Smartphone, ShieldAlert, Fingerprint } from "lucide-react";

const SubscriptionScreenDemo = () => {
  // Props for the component
  const features = [
    { icon: <Lock className="h-5 w-5 text-primary" />, text: "Create and use strong passwords" },
    { icon: <Smartphone className="h-5 w-5 text-primary" />, text: "Available on all your devices" },
    { icon: <ShieldAlert className="h-5 w-5 text-primary" />, text: "Alerts for weak or compromised logins" },
    { icon: <Fingerprint className="h-5 w-5 text-primary" />, text: "Unlock with Face ID for quick access" },
  ];

  const pricingOptions = [
    { id: "monthly", price: "$5.99", period: "Monthly", badge: "" },
    { id: "annually", price: "$15.99", period: "Annually", badge: "SAVE 24%" },
  ];
  
  // Handlers for component actions
  const handleClose = () => {
    console.log("Close button clicked");
  };

  const handleSubscribe = (planId: string) => {
    console.log(`Subscribed to the ${planId} plan!`);
    alert(`Subscribed to the ${planId} plan!`);
  };

  return (
    // Centering the component for the demo
    <div className="flex h-screen w-full items-center justify-center bg-muted">
      <div className="h-[812px] w-[375px] overflow-hidden rounded-[40px] border-[10px] border-black bg-white shadow-xl">
        <SubscriptionScreen
          backgroundImageSrc="https://cdn.21st.dev/assets/mirror/bd/bd8ace961a48a91f14ec6246b2083da59e499338c93776da46e55ba76b6aa389.jpg"
          headerImageSrc="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-x3jWH9IOEgOOgjk99NJoK1WgftvOP3.png&w=320&q=75" // Simple flower image with transparent background
          appName="99Password"
          planType="PRO"
          features={features}
          pricingOptions={pricingOptions}
          defaultPlanId="annually"
          subscribeButtonText="Subscribe now"
          footerText="30 day free trial, then $15.99 / year. Cancel anytime."
          onClose={handleClose}
          onSubscribe={handleSubscribe}
        />
      </div>
    </div>
  );
};

export default SubscriptionScreenDemo;