Overview
Subscription screen: benefits, monthly or yearly switch with the saving, plan cards, one clear button, restore and terms. It comes from the Mobile onboarding and paywall kit and also works on its own. Keyboard and screen readers: Billing period and plan are two radio groups with one Tab stop each; arrow keys move and select. The close button appears after two seconds, is first in the Tab order once there, and Escape closes the screen. The button says exactly what happens ("Start 7-day free trial" or "Subscribe for $9.99/month") and the full price is printed under it. Payment errors use an alert; restore results use a status line; with reduced motion nothing slides or scales. Built with React 19 and TypeScript, Tailwind CSS 4, Lucide icons and Motion. Light and dark themes come from CSS variables you can edit, and every demo uses believable sample data you replace with your own. Included: the component source, its sample data, light and dark theme variables, a runnable demo page, and setup guides for people and for AI coding agents.
Highlights
- Production-ready, documented source
- Clean, componentized architecture
- Drops into your stack with minimal setup
