# Live Preview Form

> Live preview form for React and Tailwind CSS (shadcn/ui) that fills a preview card beside the fields as the user types, replacing each dashed placeholder with the value the moment it arrives and lifting the card when the form is complete. It is built to show people what they are creating while they create it, which raises completion on profile, invoice, event and listing forms. A form is a group of labeled fields with a submit action; this one takes a fields schema and controlled values, renders any card through a renderPreview function with a PreviewValue helper that staggers new characters in with the Web Animations API and supports a transform hook, switches between side and stacked layouts automatically with container queries, exposes completion through data attributes and a polite live region, and runs a Promise-based onSubmit with saving and saved states on the button. Labels stay linked to inputs for screen readers and the decorative card is hidden from assistive tech; reduced motion disables the stagger and lift. The included demo types a sample profile and makes no requests. Requires React and lucide-react, with no animation library.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Form, Animation, Onboarding, Section, Card
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@dhxwhy/components/live-preview-form

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/live-preview-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 · More like this: https://21st.dev/community/components/s/form.md