Pricing Trial Modal

Pricing

About

A sophisticated pricing trial modal component with a dark theme inspired by Riverside's interface. The component features a split layout with pricing plans on the left (including radio button selection, badges, and billing details) and a timeline showing the trial progression on the right. It's fully customizable through props and includes smooth animations and hover effects.

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

Code

How Pricing Trial Modal is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { useState } from "react"
import { PricingTrialModal } from "@/components/ui/pricing-trial-modal"
import { Button } from "@/components/ui/button"

export default function PricingTrialModalDemo() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div className="flex min-h-screen items-center justify-center bg-zinc-950 p-8">
      <Button
        onClick={() => setIsOpen(true)}
        className="h-12 rounded-xl bg-lime-400 px-8 text-base font-semibold text-zinc-950 hover:bg-lime-500"
      >
        Open Pricing Modal
      </Button>

      <PricingTrialModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onStartTrial={(plan) => {
          console.log("Starting trial with plan:", plan)
          setIsOpen(false)
        }}
      />
    </div>
  )
}