Payment form

Card details with a focus ring that glides between fields, floating labels, card network logos and a lock that snaps shut, ending on a sealed confirmation.

Forms, type, Motion + GSAP

Install

npm i @gsap/react clsx gsap lucide-react motion tailwind-merge && curl -o components/payment-form.tsx https://motion-brew.com/r/payment-form.tsx

One self contained file for React and Tailwind CSS: payment-form.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { PaymentForm } from "@/components/payment-form";

export default function Page() {
  return (
    <PaymentForm
      onSubmit={(details) =>
        fetch("/api/cards", { method: "POST", body: JSON.stringify(details) })
      }
    />
  );
}

Props

Prop	Type	Default	Description
title	string	"Payment details"	Card title
subtitle	string	a short line	Line under the title
cta	string	"Save card"	Button label
doneLabel	string	"Card saved"	Button label once saved
defaultSave	boolean	true	Whether the save switch starts on
onSubmit	(details) => void \	Promise		Called with { number, name, expiry, cvc, brand, save }; a promise holds the spinner, a rejection returns to the form
continueLabel	string	"Continue to checkout"	Confirmation button label
onContinue	() => void		Called by the confirmation's continue button
className	string		Size and shape of the card

More forms

Verify flow: Connect, check, verified: a segmented bar fills, a highlight slides down the checks as each one passes, and a green seal bursts in when you are connected.
Morph search: A search pill that lifts into a card.
Rolling stepper: A stepper whose digits roll like an odometer.
Search modal: A search field whose card drops down with a gliding scope control and live counts, recent things as soft cards, a featured top result, highlighted matches and an open hint.

All animated react form components