Do I need the atroui npm package for the contact form UI?

No. npx shadcn add @atroui/contact-form copies the form. Add npm i atroui and @atroui/api-contact only when you want the hardened POST handler.

Does atroui.com send the email?

No. Mail leaves from the consumer app using CONTACT_EMAIL_TO plus SMTP_* or RESEND_API_KEY. Missing mail config returns 503, not a send on AtroUI keys.

Block

CLI registryHost API

Hardened Next.js Contact Form with SMTP API

A secure, production-ready React contact form component for Next.js with a matching SMTP and Resend backend API route.

Preview → install → use

Preview

npx shadcn@latest add @atroui/contact-form

Source lands in your repo. Setup: Installation · Registry catalog · Host APIs.

Usage

Pair with npx shadcn add @atroui/api-contact (or import handleContactPost from atroui/api/contact). Set SMTP_* / CONTACT_EMAIL_TO (see .env.example).

Ship a contact form without writing /api/contact from scratch

Most kits give you inputs. This block posts to your App Router route. The matching Host API validates JSON, ignores honeypot bots, caps body size, and sends mail through SMTP or Resend. AtroUI never holds the inbox credentials.

FAQ

Do I need the atroui npm package for the contact form UI?: No. npx shadcn add @atroui/contact-form copies the form. Add npm i atroui and @atroui/api-contact only when you want the hardened POST handler.
Does atroui.com send the email?: No. Mail leaves from the consumer app using CONTACT_EMAIL_TO plus SMTP_* or RESEND_API_KEY. Missing mail config returns 503, not a send on AtroUI keys.

Part of Next.js forms with Host APIs.