{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "contact-form",
  "title": "Contact form",
  "description": "A get-in-touch card — name, email, a topic select, and a message field.",
  "registryDependencies": [
    "card",
    "input",
    "label",
    "button",
    "textarea",
    "select"
  ],
  "files": [
    {
      "path": "registry/blocks/contact-form.tsx",
      "content": "import {\n  Card,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n  CardContent,\n  CardFooter,\n} from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Label } from '@/components/ui/label'\nimport { Button } from '@/components/ui/button'\nimport { Textarea } from '@/components/ui/textarea'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/ui/select'\n\n/** A get-in-touch card — name, email, a topic select, and a message field. */\nexport function ContactForm() {\n  return (\n    <Card className=\"w-[440px]\">\n      <CardHeader>\n        <CardTitle>Get in touch</CardTitle>\n        <CardDescription>We usually reply within one working day.</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex flex-col gap-4\">\n        <div className=\"grid grid-cols-2 gap-3\">\n          <div className=\"flex flex-col gap-1.5\">\n            <Label htmlFor=\"contact-first\">First name</Label>\n            <Input id=\"contact-first\" placeholder=\"Ada\" />\n          </div>\n          <div className=\"flex flex-col gap-1.5\">\n            <Label htmlFor=\"contact-last\">Last name</Label>\n            <Input id=\"contact-last\" placeholder=\"Lovelace\" />\n          </div>\n        </div>\n        <div className=\"flex flex-col gap-1.5\">\n          <Label htmlFor=\"contact-email\">Email</Label>\n          <Input id=\"contact-email\" type=\"email\" placeholder=\"you@example.com\" />\n        </div>\n        <div className=\"flex flex-col gap-1.5\">\n          <Label htmlFor=\"contact-topic\">Topic</Label>\n          <Select>\n            <SelectTrigger id=\"contact-topic\" className=\"w-full\">\n              <SelectValue placeholder=\"Choose a topic\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"support\">Support</SelectItem>\n              <SelectItem value=\"billing\">Billing</SelectItem>\n              <SelectItem value=\"partnership\">Partnership</SelectItem>\n              <SelectItem value=\"other\">Something else</SelectItem>\n            </SelectContent>\n          </Select>\n        </div>\n        <div className=\"flex flex-col gap-1.5\">\n          <Label htmlFor=\"contact-message\">Message</Label>\n          <Textarea id=\"contact-message\" placeholder=\"Tell us a little about it…\" rows={4} />\n          <span className=\"text-xs text-muted-foreground\">Markdown is welcome.</span>\n        </div>\n      </CardContent>\n      <CardFooter className=\"justify-end gap-2\">\n        <Button variant=\"ghost\">Cancel</Button>\n        <Button>Send message</Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/quill/contact-form.tsx"
    }
  ],
  "meta": {
    "intent": [
      "form"
    ],
    "use_when": "You need a get-in-touch form with name, email, topic, and message fields.",
    "not_for": "you only need a single email field to grow a list, not a full multi-field inquiry form → newsletter; the fields are updating an existing profile, not sending a one-off message → settings"
  },
  "docs": "A get-in-touch card — name, email, a topic select, and a message field. Do: State a response-time expectation in the description (\"We usually reply within one working day.\") so the form doesn't feel like it disappears into a void. Don't: Leave users with no sense of whether or when they'll hear back. Use newsletter when you only need a single email field to grow a list, not a full multi-field inquiry form. Use settings when the fields are updating an existing profile, not sending a one-off message.",
  "categories": [
    "form"
  ],
  "type": "registry:block"
}