👋 This is a community-driven shadcn/ui resource. For the official documentation, visit ui.shadcn.com
Contact Hero Section
Full-screen contact hero section with background image overlay displaying address, email, phone, and contact person information
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Sometimes you need to make a statement. This React contact hero section features a dramatic full-screen background image with dark overlay and centered contact information grid. Built with shadcn/ui and Lucide React icons (MapPin, Mail, Phone, User), the design displays address, email, phone, and contact person in iconized cards with hover animations. Responsive grid layout, glassmorphism effects, and mobile-optimized design—perfect for landing pages, event sites, or campaigns where contact information needs maximum visibility and impact.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/contact-sections-04.jsonnpx shadcn@latest add https://www.shadcn.io/registry/contact-sections-04.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/contact-sections-04.jsonbunx shadcn@latest add https://www.shadcn.io/registry/contact-sections-04.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 Form with Dark Card
Contact form with dark gradient contact information card
Contact Multiple Locations
Multiple office locations with address cards
Contact Team Members
Team member cards with direct contact
Contact Form with Map
Contact form with embedded map location
