Alaa

Posted on Sep 3

Building a Dynamic Pricing Page Inspired by Resend: A Deep Dive

#react #typescript #ui #frontend

Email service providers like Resend have mastered transparent, volume-based pricing. Their pricing page is clean, interactive, and helps users understand exactly what they'll pay. Today, I'll show you how I recreated this experience using React and TypeScript.

🚀 Try the live demo here!

What Makes Great Pricing UX? 🎯

Resend's pricing page works because of:

Volume-based transparency - See exactly how pricing scales
Interactive exploration - Slider lets users explore tiers
Smart recommendations - Interface highlights suitable plans
Visual hierarchy - Clear distinction between plan states
Responsive design - Works on all devices

The Tech Stack 🛠️

// Core technologies
- React 18 + TypeScript
- Tailwind CSS
- shadcn/ui components  
- Radix UI primitives
- Lucide React icons

Smart Visual States 🎨

The interface guides users toward the right plan with different states:

Plan States:

🟢 Available - Standard styling
⭐ Recommended - Green badge + highlight
✨ Highlighted - Gradient background
🔒 Unavailable - Grayed out

The Pricing Card Component 🃏

Reusable card handling multiple visual states:

interface PricingCardProps {
  planName: string;
  price: string;
  period: string;
  emailLimit: string;
  features: Feature[];
  ctaText: string;
  highlighted?: boolean;
  recommended?: boolean;
  available?: boolean;
  onCtaClick?: () => void;
}

Visual Features:

Recommended badge with gradient background
Feature icons - green checks vs gray X's
Adaptive CTAs - styling changes based on plan state
Smooth transitions - hover effects and state changes

URL State Management 🔗

Everything syncs with URL parameters for shareability:

// Update URL when volume changes
const updateURL = (volume: number) => {
  const url = new URL(window.location.href);
  url.searchParams.set('volume', volume.toString());
  window.history.replaceState({}, '', url.toString());
};

// Listen for browser navigation
useEffect(() => {
  const handlePopState = () => {
    setSelectedVolume(getVolumeFromURL());
  };
  window.addEventListener('popstate', handlePopState);
  return () => window.removeEventListener('popstate', handlePopState);
}, []);

What I Learned 🎓

Building this pricing page taught me:

User-Centric Design - Help users find their right plan
Interactive Elements - Let users explore pricing
Visual Feedback - Guide decisions with design
Technical Excellence - Smooth interactions matter
Accessibility - ARIA labels, keyboard nav, screen readers

The Result 🎉

The final implementation creates a sophisticated, user-friendly interface that helps customers make informed decisions. Users never have to guess what they'll pay or which plan suits their needs.

🔗 Check out the live demo to see all these features in action!

By making pricing transparent and interactive, you build trust and reduce friction in the conversion process.

Building effective pricing pages requires balancing visual appeal with functional clarity. The combination of React's component model, TypeScript's type safety, and Tailwind's utility classes creates a maintainable solution that scales.

Connect & Follow 🤝

Want to see more projects like this? Check out my GitHub profile for more frontend challenges and full-stack projects!

What's your experience with pricing page UX? Have you built similar interactive components? Let me know in the comments! 👇

Tags: #react #typescript #frontend #ui #pricing #webdev #javascript #tailwindcss

DEV Community