Back to Components
Auth

Checkout Form

Complete checkout form with contact, shipping address, and payment sections. Supports 8 style presets with self-contained Tailwind classes.

PropsUsage ExampleVariations

Checkout

Complete your order by providing your details below.

Contact

Shipping address

Payment

Dependencies

  • clsx
  • tailwind-merge

Files

  • components/ui/checkout-form.tsx

Installation

Using shadcn CLI

npx shadcn add checkout-form --url https://ui.hampton.io

Manual installation

Copy the component file to your project and install dependencies:

npm install clsx tailwind-merge

Related Auth Components