Overview
What happens during a free trial: today, the dated reminder, the dated billing day with the amount, and the price in words. It comes from the Mobile onboarding and paywall kit and also works on its own. Keyboard and screen readers: The steps are an ordered list, so screen readers count them; icons and the rail are decorative. Dates and the amount are written out ("Day 7 · Nov 9", "You're billed $59.99"), never shown only as an icon or color. The price sentence states the trial length, the full price, the period and that nothing is charged today. Built with React 19 and TypeScript, Tailwind CSS 4 and Lucide icons. 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
