Components
Loading preview...
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.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/subscription-screen// 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://images.unsplash.com/photo-1502791451862-7bd8c1df43a7?q=80&w=1964&auto=format&fit=crop"
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;