# Checkout Form

> This CheckoutForm component is a modern, responsive checkout interface built with shadcn UI, Tailwind CSS, and Lucide icons. It presents a clean, card-based layout that guides users through reviewing their order. The component is divided into clear sections: Delivery Address, Billing Method, Discount Code, and Order Total, each visually separated by separators for better readability. Input fields and buttons are styled consistently using shadcn’s Input and Button components, ensuring accessibility and a smooth user experience. The footer displays the total amount and a prominent Place Order button.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@ruixen.ui/components/checkout-form

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/checkout-form?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt