Components
Loading preview...
This component is a minimal and responsive payment modal that allows users to select a subscription plan and enter their card details to complete the payment. The selected plan dynamically updates the payment amount displayed on the submit button. It includes optional coupon code input, clean single-column input fields for cardholder name, card number, expiry, and CVC, and a compact design that works well on both desktop and mobile. The component emphasizes simplicity, clarity, and ease of use while keeping all essential payment interactions within a single dialog.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/minimal-payment-modalimport MinimalPaymentModal from "@/components/ui/minimal-payment-modal";
export default function DemoOne() {
return <MinimalPaymentModal />;
}