Components
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.
Loading preview...
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>
)
}