Does Contact Form work with Next.js?

Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.

Can I change the copy and colours?

Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Contact Form

Contact form with topic pills, inline validation and a success state, beside your details.

Type: Contact section
Styles: Light, Minimal
Licence: Charcoal UI Pro

About Contact Form

Contact Form asks what the message is about with topic pills, validates name, email and message inline, and swaps to a clear success state that names the topic. Contact details sit beside it.

It is a full-width contact section for React and Tailwind CSS 4, in a light and minimal style. Preview it at any width above, then install it with one command.

When to use Contact Form

Agencies and studios.
Photographers and freelancers.
Estate agents and local services.
B2B companies without a sales team.

How it is built

Uses Input and Textarea with real labels and error messages, and topics, email, address and hours are props. Connect the submit handler to your own endpoint.

It is composed from Button, Input, Textarea, so installing it also installs those components, and you can restyle each one the same way you would on its own.

Goes well with Contact Form

Contact Form is part of 3 full templates, so you can see it in a finished page.

Foundry template: Big agency work, small agency speed.
Hartwell template: Let the pictures do the talking.
Keyhaven template: Homes, neighbourhoods and the people who know them.
Contact Offices: React office cards with each city's live local time and open-now status
Contact Booking: A React book-a-demo section with a calendar, time slots and confirmation
Contact Support: A React support hub with live channel status, reply times and system status
Button: An animated React button with six variants, spring press feedback and a width-stable loading state
Input: An animated React text input with icons, a shake-once error and a success check that draws in
Textarea: An auto-growing React textarea with a character ring that warms near the limit

Install Contact Form

npx shadcn@latest add @charcoal/contact-form

Contact Form is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.

Frequently asked questions

Does Contact Form work with Next.js?: Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
Can I change the copy and colours?: Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Built from

Button: Six variants with spring press feedback. The loading state swaps the label for a spinner without changing width.
Input: Text field with a visible label, optional icons, an error that shakes once, and a success check that draws in.
Textarea: Grows with its content on a spring, with a ring that fills toward the character limit and warms near the end.

Contact Form as Markdown