Stow Registry Item Spec

Every Stow registry item uses the Shadcn registry structure and adds marketplace metadata under meta.stow. This page documents the fields and guidance for the Stow registry item spec.

Shadcn Registry Item Spec

It's a good idea to read and familiarize yourself with the Shadcn registry docs and the Shadcn Registry Item JSON Schema for the full details of the registry item spec before continuing.

Fields

The Stow registry item spec extends the Shadcn registry item spec with the following fields:

Full Registry Item Example

Here is an example of a full registry item that includes all the fields from the Stow registry item spec.

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "centered-grid-contact-section",
  "title": "Centered Grid Contact Section",
  "type": "registry:block",
  "description": "A modern centered contact section featuring interactive contact method cards and an integrated form. Perfect for SaaS, tech companies, and customer-focused businesses.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "badge",
    "card",
    "input",
    "textarea"
  ],
  "meta": {
    "stow": {
      "tokenPrice": 25,
      "subType": "Form",
      "industry": "Marketing",
      "framework": "React",
      "uiLibraries": [
        "Shadcn",
        "Radix UI"
      ],
      "isVisible": true,
      "previewUrl": "https://example.com/blocks/centered-grid-contact-section",
      "thumbnailUrl": "https://example.com/blocks/centered-grid-contact-section.png"
    }
  },
  "files": [
    {
      "path": "components/blocks/contact-sections/centered-grid-contact-section.tsx",
      "content": "import { Button } from \"@/components/ui/button\";\r\nimport { Card, CardContent } from \"@/components/ui/card\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Textarea } from \"@/components/ui/textarea\";\r\nimport { Badge } from \"@/components/ui/badge\";\r\nimport {\r\n  Mail,\r\n  Phone,\r\n  MapPin,\r\n  MessageCircle,\r\n  Send,\r\n  CheckCircle2,\r\n  Calendar,\r\n  HeadphonesIcon,\r\n} from \"lucide-react\";\r\n\r\nexport default function CenteredGridContactSection() {\r\n  return (\r\n    <section className=\"relative w-full bg-background text-foreground py-24 px-4\">\r\n      <div className=\"container mx-auto max-w-6xl\">\r\n        {/* Header */}\r\n        <div className=\"text-center mb-16\">\r\n          <Badge variant=\"secondary\" className=\"mb-4\">\r\n            <HeadphonesIcon className=\"h-3 w-3 mr-1.5\" />\r\n            Customer Support\r\n          </Badge>\r\n          <h2 className=\"text-4xl md:text-5xl font-bold mb-4\">\r\n            We're Here to{\" \"}\r\n            <span className=\"bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent\">\r\n              Help You\r\n            </span>\r\n          </h2>\r\n          <p className=\"text-muted-foreground text-lg max-w-2xl mx-auto\">\r\n            Choose your preferred way to get in touch. Our team is ready to\r\n            assist you with any questions or concerns.\r\n          </p>\r\n        </div>\r\n\r\n        {/* Contact Method Cards Grid */}\r\n        <div className=\"grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16\">\r\n          {/* Email Card */}\r\n          <Card className=\"border-primary/20 hover:border-primary/40 transition-all duration-300 hover:shadow-lg\">\r\n            <CardContent className=\"text-center py-0\">\r\n              <div className=\"space-y-4\">\r\n                <div className=\"w-16 h-16 mx-auto rounded-full bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center\">\r\n                  <Mail className=\"h-7 w-7 text-primary\" />\r\n                </div>\r\n                <div>\r\n                  <h3 className=\"font-semibold text-lg mb-1\">Email</h3>\r\n                  <p className=\"text-sm text-muted-foreground mb-3\">\r\n                    Response in 24h\r\n                  </p>\r\n                  <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\r\n                    <Mail className=\"h-3.5 w-3.5 mr-2\" />\r\n                    Send Email\r\n                  </Button>\r\n                </div>\r\n              </div>\r\n            </CardContent>\r\n          </Card>\r\n\r\n          {/* Phone Card */}\r\n          <Card className=\"border-primary/20 hover:border-primary/40 transition-all duration-300 hover:shadow-lg\">\r\n            <CardContent className=\"text-center py-0\">\r\n              <div className=\"space-y-4\">\r\n                <div className=\"w-16 h-16 mx-auto rounded-full bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center\">\r\n                  <Phone className=\"h-7 w-7 text-primary\" />\r\n                </div>\r\n                <div>\r\n                  <h3 className=\"font-semibold text-lg mb-1\">Phone</h3>\r\n                  <p className=\"text-sm text-muted-foreground mb-3\">\r\n                    Mon-Fri 9-6 EST\r\n                  </p>\r\n                  <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\r\n                    <Phone className=\"h-3.5 w-3.5 mr-2\" />\r\n                    Call Now\r\n                  </Button>\r\n                </div>\r\n              </div>\r\n            </CardContent>\r\n          </Card>\r\n\r\n          {/* Live Chat Card */}\r\n          <Card className=\"border-primary/20 hover:border-primary/40 transition-all duration-300 hover:shadow-lg\">\r\n            <CardContent className=\"text-center py-0\">\r\n              <div className=\"space-y-4\">\r\n                <div className=\"w-16 h-16 mx-auto rounded-full bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center relative\">\r\n                  <MessageCircle className=\"h-7 w-7 text-primary\" />\r\n                  <div className=\"absolute top-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-background\"></div>\r\n                </div>\r\n                <div>\r\n                  <h3 className=\"font-semibold text-lg mb-1\">Live Chat</h3>\r\n                  <p className=\"text-sm text-muted-foreground mb-3\">\r\n                    Available now\r\n                  </p>\r\n                  <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\r\n                    <MessageCircle className=\"h-3.5 w-3.5 mr-2\" />\r\n                    Start Chat\r\n                  </Button>\r\n                </div>\r\n              </div>\r\n            </CardContent>\r\n          </Card>\r\n\r\n          {/* Schedule Card */}\r\n          <Card className=\"border-primary/20 hover:border-primary/40 transition-all duration-300 hover:shadow-lg\">\r\n            <CardContent className=\"text-center py-0\">\r\n              <div className=\"space-y-4\">\r\n                <div className=\"w-16 h-16 mx-auto rounded-full bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center\">\r\n                  <Calendar className=\"h-7 w-7 text-primary\" />\r\n                </div>\r\n                <div>\r\n                  <h3 className=\"font-semibold text-lg mb-1\">Schedule</h3>\r\n                  <p className=\"text-sm text-muted-foreground mb-3\">\r\n                    Book a meeting\r\n                  </p>\r\n                  <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\r\n                    <Calendar className=\"h-3.5 w-3.5 mr-2\" />\r\n                    Book Time\r\n                  </Button>\r\n                </div>\r\n              </div>\r\n            </CardContent>\r\n          </Card>\r\n        </div>\r\n\r\n        {/* Contact Form Section */}\r\n        <div className=\"max-w-3xl mx-auto\">\r\n          <div className=\"bg-gradient-to-br from-primary/5 via-background to-secondary/5 rounded-2xl p-8 md:p-12 border border-primary/10\">\r\n            <div className=\"text-center mb-8\">\r\n              <h3 className=\"text-2xl font-bold mb-2\">Send Us a Message</h3>\r\n              <p className=\"text-muted-foreground\">\r\n                Fill out the form below and we'll get back to you as soon as\r\n                possible\r\n              </p>\r\n            </div>\r\n\r\n            <form className=\"space-y-6\">\r\n              {/* Name Fields */}\r\n              <div className=\"grid md:grid-cols-2 gap-6\">\r\n                <div className=\"space-y-2\">\r\n                  <label htmlFor=\"name\" className=\"text-sm font-medium block\">\r\n                    Full Name *\r\n                  </label>\r\n                  <Input\r\n                    id=\"name\"\r\n                    placeholder=\"Enter your full name\"\r\n                    className=\"bg-background/50 backdrop-blur\"\r\n                  />\r\n                </div>\r\n                <div className=\"space-y-2\">\r\n                  <label\r\n                    htmlFor=\"company\"\r\n                    className=\"text-sm font-medium block\"\r\n                  >\r\n                    Company\r\n                  </label>\r\n                  <Input\r\n                    id=\"company\"\r\n                    placeholder=\"Your company name\"\r\n                    className=\"bg-background/50 backdrop-blur\"\r\n                  />\r\n                </div>\r\n              </div>\r\n\r\n              {/* Email and Phone */}\r\n              <div className=\"grid md:grid-cols-2 gap-6\">\r\n                <div className=\"space-y-2\">\r\n                  <label htmlFor=\"email\" className=\"text-sm font-medium block\">\r\n                    Email Address *\r\n                  </label>\r\n                  <Input\r\n                    id=\"email\"\r\n                    type=\"email\"\r\n                    placeholder=\"you@example.com\"\r\n                    className=\"bg-background/50 backdrop-blur\"\r\n                  />\r\n                </div>\r\n                <div className=\"space-y-2\">\r\n                  <label htmlFor=\"phone\" className=\"text-sm font-medium block\">\r\n                    Phone Number\r\n                  </label>\r\n                  <Input\r\n                    id=\"phone\"\r\n                    type=\"tel\"\r\n                    placeholder=\"+1 (555) 000-0000\"\r\n                    className=\"bg-background/50 backdrop-blur\"\r\n                  />\r\n                </div>\r\n              </div>\r\n\r\n              {/* Topic Selection */}\r\n              <div className=\"space-y-2\">\r\n                <label htmlFor=\"topic\" className=\"text-sm font-medium block\">\r\n                  How can we help? *\r\n                </label>\r\n                <div className=\"grid grid-cols-2 md:grid-cols-4 gap-3\">\r\n                  <Button\r\n                    type=\"button\"\r\n                    variant=\"outline\"\r\n                    className=\"h-auto py-3 hover:bg-primary/10 hover:border-primary/50\"\r\n                  >\r\n                    Sales\r\n                  </Button>\r\n                  <Button\r\n                    type=\"button\"\r\n                    variant=\"outline\"\r\n                    className=\"h-auto py-3 hover:bg-primary/10 hover:border-primary/50\"\r\n                  >\r\n                    Support\r\n                  </Button>\r\n                  <Button\r\n                    type=\"button\"\r\n                    variant=\"outline\"\r\n                    className=\"h-auto py-3 hover:bg-primary/10 hover:border-primary/50\"\r\n                  >\r\n                    Billing\r\n                  </Button>\r\n                  <Button\r\n                    type=\"button\"\r\n                    variant=\"outline\"\r\n                    className=\"h-auto py-3 hover:bg-primary/10 hover:border-primary/50\"\r\n                  >\r\n                    Other\r\n                  </Button>\r\n                </div>\r\n              </div>\r\n\r\n              {/* Message */}\r\n              <div className=\"space-y-2\">\r\n                <label htmlFor=\"message\" className=\"text-sm font-medium block\">\r\n                  Your Message *\r\n                </label>\r\n                <Textarea\r\n                  id=\"message\"\r\n                  placeholder=\"Tell us what you need help with...\"\r\n                  className=\"min-h-[140px] bg-background/50 backdrop-blur resize-none\"\r\n                />\r\n              </div>\r\n\r\n              {/* Submit Section */}\r\n              <div className=\"flex flex-col sm:flex-row items-center justify-between gap-4 pt-2\">\r\n                <div className=\"flex items-center gap-2 text-sm text-muted-foreground\">\r\n                  <CheckCircle2 className=\"h-4 w-4 text-primary\" />\r\n                  <span>We'll respond within 24 hours</span>\r\n                </div>\r\n                <Button size=\"lg\" className=\"w-full sm:w-auto\">\r\n                  <Send className=\"h-4 w-4 mr-2\" />\r\n                  Send Message\r\n                </Button>\r\n              </div>\r\n            </form>\r\n          </div>\r\n\r\n          {/* Bottom Info Cards */}\r\n          <div className=\"grid md:grid-cols-3 gap-6 mt-12\">\r\n            <div className=\"text-center p-6 rounded-lg bg-primary/5 border border-primary/10\">\r\n              <MapPin className=\"h-8 w-8 text-primary mx-auto mb-3\" />\r\n              <h4 className=\"font-semibold mb-2\">Visit Us</h4>\r\n              <p className=\"text-sm text-muted-foreground\">\r\n                123 Business Ave\r\n                <br />\r\n                New York, NY 10001\r\n              </p>\r\n            </div>\r\n\r\n            <div className=\"text-center p-6 rounded-lg bg-primary/5 border border-primary/10\">\r\n              <Mail className=\"h-8 w-8 text-primary mx-auto mb-3\" />\r\n              <h4 className=\"font-semibold mb-2\">Email Us</h4>\r\n              <p className=\"text-sm text-muted-foreground\">\r\n                support@company.com\r\n                <br />\r\n                sales@company.com\r\n              </p>\r\n            </div>\r\n\r\n            <div className=\"text-center p-6 rounded-lg bg-primary/5 border border-primary/10\">\r\n              <Phone className=\"h-8 w-8 text-primary mx-auto mb-3\" />\r\n              <h4 className=\"font-semibold mb-2\">Call Us</h4>\r\n              <p className=\"text-sm text-muted-foreground\">\r\n                Sales: +1 (555) 123-4567\r\n                <br />\r\n                Support: +1 (555) 765-4321\r\n              </p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  );\r\n}\r\n",
      "type": "registry:block"
    }
  ],
  "docs": "## Overview\n\nA centered, card-based contact section that presents multiple contact methods in an elegant grid, followed by a comprehensive contact form. Features interactive hover effects, topic selection buttons, and bottom information cards for key contact details.\n\n## Features\n\n- **Contact Method Grid**: Four interactive cards for Email, Phone, Live Chat, and Schedule\n- **Live Status Indicator**: Green dot on Live Chat card showing availability\n- **Integrated Contact Form**: Full-featured form with name, company, email, phone, and message\n- **Topic Selection**: Visual button grid for Sales, Support, Billing, and Other\n- **Bottom Info Cards**: Three cards displaying location, email, and phone information\n- **Gradient Form Background**: Subtle gradient backdrop with blur effects\n- **Hover Animations**: Cards lift and glow on hover for better interactivity\n- **Response Time Badge**: Trust element showing 24-hour response commitment\n- **Centered Layout**: All content centered for maximum visual impact\n- **Fully Responsive**: Adapts from 1 to 4 columns based on screen size\n\n## Usage\n\n```tsx\nimport { CenteredGridContactSection } from \"@/components/blocks/contact-sections/centered-grid-contact-section\";\n\nexport default function Page() {\n  return <CenteredGridContactSection />;\n}\n```\n\n## Customization\n\nTailor the component to your needs:\n\n- Add or remove contact method cards\n- Update topic selection buttons for your use case\n- Modify contact information in bottom cards\n- Change live chat status indicator based on availability\n- Customize form fields and validation\n- Update gradient colors via theme tokens\n- Adjust grid columns based on number of contact methods\n- Link contact method buttons to actual services\n\n## Best Practices\n\n- Connect contact method buttons to real actions (email, phone, chat, calendar)\n- Update live chat status dynamically based on availability\n- Implement form validation before submission\n- Test all interactive elements across devices\n- Keep topic selection options relevant to your business\n- Ensure phone and email links work correctly\n- Provide clear expectations for response times\n- Consider integrating with a scheduling tool for the Schedule card\n\n## Use Cases\n\n- SaaS and technology companies\n- Customer support portals\n- E-commerce and retail businesses\n- Marketing and creative agencies\n- Consulting firms\n- Healthcare and telemedicine platforms\n- Education and online learning platforms\n- Any business offering multiple contact channels\n\n## Design Notes\n\n- Centered layout creates focus and hierarchy\n- Contact method cards provide clear options before form commitment\n- Topic selection streamlines support routing\n- Gradient form area distinguishes it from contact methods\n- Bottom cards reinforce contact information\n- Hover effects encourage exploration and interaction\n\n## Dependencies\n\n- `lucide-react` for icons\n- shadcn/ui `button`, `badge`, `card`, `input`, and `textarea` components"
}

Minimal Registry Item Example

Here is an example of a minimal registry item that includes only the required fields from the Stow registry item spec.

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "centered-grid-contact-section",
  "title": "Centered Grid Contact Section",
  "type": "registry:block",
  "meta": {
    "stow": {
      "tokenPrice": 25,
      "subType": "Form",
      "framework": "React",
      "isVisible": true,
      "previewUrl": "https://example.com/blocks/centered-grid-contact-section"
    }
  },
  "files": [
    {
      "path": "components/blocks/contact-sections/centered-grid-contact-section.tsx",
      "content": "import { Button } from \"@/components/ui/button\";\r\nimport { Card, CardContent } from \"@/components/ui/card\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Textarea } from \"@/components/ui/textarea\";\r\nimport { Badge } from \"@/components/ui/badge\";\r\nimport {\r\n  Mail,\r\n  Phone,\r\n  MapPin,\r\n  MessageCircle,\r\n  Send,\r\n  CheckCircle2,\r\n  Calendar,\r\n  HeadphonesIcon,\r\n} from \"lucide-react\";\r\n\r\nexport default function CenteredGridContactSection() {\r\n  return (\r\n    <section className=\"relative w-full bg-background text-foreground py-24 px-4\">\r\n      <div className=\"container mx-auto max-w-6xl\">\r\n        {/* Header */}\r\n        <div className=\"text-center mb-16\">\r\n          <Badge variant=\"secondary\" className=\"mb-4\">\r\n            <HeadphonesIcon className=\"h-3 w-3 mr-1.5\" />\r\n            Customer Support\r\n          </Badge>\r\n          <h2 className=\"text-4xl md:text-5xl font-bold mb-4\">\r\n            We're Here to{\" \"}\r\n            <span className=\"bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent\">\r\n              Help You\r\n            </span>\r\n          </h2>\r\n          <p className=\"text-muted-foreground text-lg max-w-2xl mx-auto\">\r\n            Choose your preferred way to get in touch. Our team is ready to\r\n            assist you with any questions or concerns.\r\n          </p>\r\n        </div>\r\n\r\n        {/* Contact Method Cards Grid */}\r\n        <div className=\"grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16\">\r\n          {/* Email Card */}\r\n          <Card className=\"border-primary/20 hover:border-primary/40 transition-all duration-300 hover:shadow-lg\">\r\n            <CardContent className=\"text-center py-0\">\r\n              <div className=\"space-y-4\">\r\n                <div className=\"w-16 h-16 mx-auto rounded-full bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center\">\r\n                  <Mail className=\"h-7 w-7 text-primary\" />\r\n                </div>\r\n                <div>\r\n                  <h3 className=\"font-semibold text-lg mb-1\">Email</h3>\r\n                  <p className=\"text-sm text-muted-foreground mb-3\">\r\n                    Response in 24h\r\n                  </p>\r\n                  <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\r\n                    <Mail className=\"h-3.5 w-3.5 mr-2\" />\r\n                    Send Email\r\n                  </Button>\r\n                </div>\r\n              </div>\r\n            </CardContent>\r\n          </Card>\r\n\r\n          {/* Phone Card */}\r\n          <Card className=\"border-primary/20 hover:border-primary/40 transition-all duration-300 hover:shadow-lg\">\r\n            <CardContent className=\"text-center py-0\">\r\n              <div className=\"space-y-4\">\r\n                <div className=\"w-16 h-16 mx-auto rounded-full bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center\">\r\n                  <Phone className=\"h-7 w-7 text-primary\" />\r\n                </div>\r\n                <div>\r\n                  <h3 className=\"font-semibold text-lg mb-1\">Phone</h3>\r\n                  <p className=\"text-sm text-muted-foreground mb-3\">\r\n                    Mon-Fri 9-6 EST\r\n                  </p>\r\n                  <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\r\n                    <Phone className=\"h-3.5 w-3.5 mr-2\" />\r\n                    Call Now\r\n                  </Button>\r\n                </div>\r\n              </div>\r\n            </CardContent>\r\n          </Card>\r\n\r\n          {/* Live Chat Card */}\r\n          <Card className=\"border-primary/20 hover:border-primary/40 transition-all duration-300 hover:shadow-lg\">\r\n            <CardContent className=\"text-center py-0\">\r\n              <div className=\"space-y-4\">\r\n                <div className=\"w-16 h-16 mx-auto rounded-full bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center relative\">\r\n                  <MessageCircle className=\"h-7 w-7 text-primary\" />\r\n                  <div className=\"absolute top-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-background\"></div>\r\n                </div>\r\n                <div>\r\n                  <h3 className=\"font-semibold text-lg mb-1\">Live Chat</h3>\r\n                  <p className=\"text-sm text-muted-foreground mb-3\">\r\n                    Available now\r\n                  </p>\r\n                  <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\r\n                    <MessageCircle className=\"h-3.5 w-3.5 mr-2\" />\r\n                    Start Chat\r\n                  </Button>\r\n                </div>\r\n              </div>\r\n            </CardContent>\r\n          </Card>\r\n\r\n          {/* Schedule Card */}\r\n          <Card className=\"border-primary/20 hover:border-primary/40 transition-all duration-300 hover:shadow-lg\">\r\n            <CardContent className=\"text-center py-0\">\r\n              <div className=\"space-y-4\">\r\n                <div className=\"w-16 h-16 mx-auto rounded-full bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center\">\r\n                  <Calendar className=\"h-7 w-7 text-primary\" />\r\n                </div>\r\n                <div>\r\n                  <h3 className=\"font-semibold text-lg mb-1\">Schedule</h3>\r\n                  <p className=\"text-sm text-muted-foreground mb-3\">\r\n                    Book a meeting\r\n                  </p>\r\n                  <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\r\n                    <Calendar className=\"h-3.5 w-3.5 mr-2\" />\r\n                    Book Time\r\n                  </Button>\r\n                </div>\r\n              </div>\r\n            </CardContent>\r\n          </Card>\r\n        </div>\r\n\r\n        {/* Contact Form Section */}\r\n        <div className=\"max-w-3xl mx-auto\">\r\n          <div className=\"bg-gradient-to-br from-primary/5 via-background to-secondary/5 rounded-2xl p-8 md:p-12 border border-primary/10\">\r\n            <div className=\"text-center mb-8\">\r\n              <h3 className=\"text-2xl font-bold mb-2\">Send Us a Message</h3>\r\n              <p className=\"text-muted-foreground\">\r\n                Fill out the form below and we'll get back to you as soon as\r\n                possible\r\n              </p>\r\n            </div>\r\n\r\n            <form className=\"space-y-6\">\r\n              {/* Name Fields */}\r\n              <div className=\"grid md:grid-cols-2 gap-6\">\r\n                <div className=\"space-y-2\">\r\n                  <label htmlFor=\"name\" className=\"text-sm font-medium block\">\r\n                    Full Name *\r\n                  </label>\r\n                  <Input\r\n                    id=\"name\"\r\n                    placeholder=\"Enter your full name\"\r\n                    className=\"bg-background/50 backdrop-blur\"\r\n                  />\r\n                </div>\r\n                <div className=\"space-y-2\">\r\n                  <label\r\n                    htmlFor=\"company\"\r\n                    className=\"text-sm font-medium block\"\r\n                  >\r\n                    Company\r\n                  </label>\r\n                  <Input\r\n                    id=\"company\"\r\n                    placeholder=\"Your company name\"\r\n                    className=\"bg-background/50 backdrop-blur\"\r\n                  />\r\n                </div>\r\n              </div>\r\n\r\n              {/* Email and Phone */}\r\n              <div className=\"grid md:grid-cols-2 gap-6\">\r\n                <div className=\"space-y-2\">\r\n                  <label htmlFor=\"email\" className=\"text-sm font-medium block\">\r\n                    Email Address *\r\n                  </label>\r\n                  <Input\r\n                    id=\"email\"\r\n                    type=\"email\"\r\n                    placeholder=\"you@example.com\"\r\n                    className=\"bg-background/50 backdrop-blur\"\r\n                  />\r\n                </div>\r\n                <div className=\"space-y-2\">\r\n                  <label htmlFor=\"phone\" className=\"text-sm font-medium block\">\r\n                    Phone Number\r\n                  </label>\r\n                  <Input\r\n                    id=\"phone\"\r\n                    type=\"tel\"\r\n                    placeholder=\"+1 (555) 000-0000\"\r\n                    className=\"bg-background/50 backdrop-blur\"\r\n                  />\r\n                </div>\r\n              </div>\r\n\r\n              {/* Topic Selection */}\r\n              <div className=\"space-y-2\">\r\n                <label htmlFor=\"topic\" className=\"text-sm font-medium block\">\r\n                  How can we help? *\r\n                </label>\r\n                <div className=\"grid grid-cols-2 md:grid-cols-4 gap-3\">\r\n                  <Button\r\n                    type=\"button\"\r\n                    variant=\"outline\"\r\n                    className=\"h-auto py-3 hover:bg-primary/10 hover:border-primary/50\"\r\n                  >\r\n                    Sales\r\n                  </Button>\r\n                  <Button\r\n                    type=\"button\"\r\n                    variant=\"outline\"\r\n                    className=\"h-auto py-3 hover:bg-primary/10 hover:border-primary/50\"\r\n                  >\r\n                    Support\r\n                  </Button>\r\n                  <Button\r\n                    type=\"button\"\r\n                    variant=\"outline\"\r\n                    className=\"h-auto py-3 hover:bg-primary/10 hover:border-primary/50\"\r\n                  >\r\n                    Billing\r\n                  </Button>\r\n                  <Button\r\n                    type=\"button\"\r\n                    variant=\"outline\"\r\n                    className=\"h-auto py-3 hover:bg-primary/10 hover:border-primary/50\"\r\n                  >\r\n                    Other\r\n                  </Button>\r\n                </div>\r\n              </div>\r\n\r\n              {/* Message */}\r\n              <div className=\"space-y-2\">\r\n                <label htmlFor=\"message\" className=\"text-sm font-medium block\">\r\n                  Your Message *\r\n                </label>\r\n                <Textarea\r\n                  id=\"message\"\r\n                  placeholder=\"Tell us what you need help with...\"\r\n                  className=\"min-h-[140px] bg-background/50 backdrop-blur resize-none\"\r\n                />\r\n              </div>\r\n\r\n              {/* Submit Section */}\r\n              <div className=\"flex flex-col sm:flex-row items-center justify-between gap-4 pt-2\">\r\n                <div className=\"flex items-center gap-2 text-sm text-muted-foreground\">\r\n                  <CheckCircle2 className=\"h-4 w-4 text-primary\" />\r\n                  <span>We'll respond within 24 hours</span>\r\n                </div>\r\n                <Button size=\"lg\" className=\"w-full sm:w-auto\">\r\n                  <Send className=\"h-4 w-4 mr-2\" />\r\n                  Send Message\r\n                </Button>\r\n              </div>\r\n            </form>\r\n          </div>\r\n\r\n          {/* Bottom Info Cards */}\r\n          <div className=\"grid md:grid-cols-3 gap-6 mt-12\">\r\n            <div className=\"text-center p-6 rounded-lg bg-primary/5 border border-primary/10\">\r\n              <MapPin className=\"h-8 w-8 text-primary mx-auto mb-3\" />\r\n              <h4 className=\"font-semibold mb-2\">Visit Us</h4>\r\n              <p className=\"text-sm text-muted-foreground\">\r\n                123 Business Ave\r\n                <br />\r\n                New York, NY 10001\r\n              </p>\r\n            </div>\r\n\r\n            <div className=\"text-center p-6 rounded-lg bg-primary/5 border border-primary/10\">\r\n              <Mail className=\"h-8 w-8 text-primary mx-auto mb-3\" />\r\n              <h4 className=\"font-semibold mb-2\">Email Us</h4>\r\n              <p className=\"text-sm text-muted-foreground\">\r\n                support@company.com\r\n                <br />\r\n                sales@company.com\r\n              </p>\r\n            </div>\r\n\r\n            <div className=\"text-center p-6 rounded-lg bg-primary/5 border border-primary/10\">\r\n              <Phone className=\"h-8 w-8 text-primary mx-auto mb-3\" />\r\n              <h4 className=\"font-semibold mb-2\">Call Us</h4>\r\n              <p className=\"text-sm text-muted-foreground\">\r\n                Sales: +1 (555) 123-4567\r\n                <br />\r\n                Support: +1 (555) 765-4321\r\n              </p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  );\r\n}\r\n",
      "type": "registry:block"
    }
  ]
}