For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
30
Sponsor

Contact Form

PreviousNext

A complete contact form with name fields, phone with country selector, email, message textarea, and file attachment.

Get in Touch

We'd love to hear from you. Fill out the form below.

Installation

$ pnpm dlx shadcn@latest add @mcpcn/contact-form

Usage

import {
  ContactForm,
  ContactFormActions,
  ContactFormContactFields,
  ContactFormContent,
  ContactFormHeader,
  ContactFormMessageField,
  ContactFormNameFields,
} from "@/components/ui/contact-form";
<ContactForm>
  <ContactFormContent>
    <ContactFormHeader className="mb-6" />
    <ContactFormNameFields />
    <ContactFormContactFields />
    <ContactFormMessageField />
    <ContactFormActions />
  </ContactFormContent>
</ContactForm>

Composition

Use the following composition to build an ContactForm:

ContactForm
├── ContactFormActions
├── ContactFormContactFields
├── ContactFormContent
├── ContactFormCountrySelect
├── ContactFormHeader
├── ContactFormMessageField
└── ContactFormNameFields

OpenUI Integration

Install the OpenUI React packages.

pnpm add @openuidev/react-lang zod

Add ContactForm to a component library and map it to the installed component.

import { createLibrary, defineComponent } from "@openuidev/react-lang";
import { z } from "zod/v4";
 
import {
  ContactForm,
  ContactFormActions,
  ContactFormContactFields,
  ContactFormContent,
  ContactFormHeader,
  ContactFormMessageField,
  ContactFormNameFields,
} from "@/components/ui/contact-form";
 
const OpenUIContactForm = defineComponent({
  name: "ContactForm",
  description:
    "A complete contact form with name fields, phone with country selector, email, message textarea, and file attachment.",
  props: z.object({}),
  component: () => (
    <ContactForm>
      <ContactFormContent>
        <ContactFormHeader className="mb-6" />
        <ContactFormNameFields />
        <ContactFormContactFields />
        <ContactFormMessageField />
        <ContactFormActions />
      </ContactFormContent>
    </ContactForm>
  ),
});
 
export const contact_formLibrary = createLibrary({
  root: "ContactForm",
  components: [OpenUIContactForm],
});

For richer generated compositions, define the child primitives separately and connect them with .ref fields. See Defining Components in the OpenUI documentation.

json-render Integration

Install the json-render React packages.

pnpm add @json-render/core @json-render/react zod

Add ContactForm to a component catalog and map it to the installed component.

import { defineCatalog } from "@json-render/core";
import { defineRegistry } from "@json-render/react";
import { schema } from "@json-render/react/schema";
import { z } from "zod";
 
import {
  ContactForm,
  ContactFormActions,
  ContactFormContactFields,
  ContactFormContent,
  ContactFormHeader,
  ContactFormMessageField,
  ContactFormNameFields,
} from "@/components/ui/contact-form";
 
export const catalog = defineCatalog(schema, {
  components: {
    ContactForm: {
      props: z.object({}),
      description:
        "A complete contact form with name fields, phone with country selector, email, message textarea, and file attachment.",
    },
  },
});
 
export const { registry } = defineRegistry(catalog, {
  components: {
    ContactForm: () => (
      <ContactForm>
        <ContactFormContent>
          <ContactFormHeader className="mb-6" />
          <ContactFormNameFields />
          <ContactFormContactFields />
          <ContactFormMessageField />
          <ContactFormActions />
        </ContactFormContent>
      </ContactForm>
    ),
  },
});

Use catalog.prompt() to constrain model output, then render the generated spec with the json-render React Renderer. See the json-render Quick Start for the provider and streaming setup.

API Reference

See the Base UI documentation for more information.