👋 This is a community-driven shadcn/ui resource. For the official documentation, visit ui.shadcn.com
Contact Form with Dark Card
Contact form with dark gradient card displaying contact information, social media links, and iconized contact methods
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Modern contact forms need personality. This React contact section pairs a clean form with a stunning dark gradient card featuring contact info and social media links. Built with shadcn/ui Card, Input, Textarea components and Lucide React icons (Twitter, LinkedIn, Dribbble, Facebook), the dark card creates visual contrast while providing phone, email, and support ticket options. Responsive two-column layout, hover animations, and professional aesthetic—perfect for creative agencies, tech startups, or portfolios where design matters.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/contact-sections-03.jsonnpx shadcn@latest add https://www.shadcn.io/registry/contact-sections-03.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/contact-sections-03.jsonbunx shadcn@latest add https://www.shadcn.io/registry/contact-sections-03.jsonRelated blocks you will also like
Contact Sections with Card
Contact form with card layout and contact options
Contact Form with Image
Contact form with split layout and full-height image
Contact Hero Section
Full-screen contact section with background image
Contact with Newsletter
Newsletter signup with contact form
Contact Team Members
Team member cards with direct contact
Multi-step Contact Form
Wizard-style contact form with steps