Industries/ Home services
Plumber website components for React
A plumbing site has one job: turn an emergency search into a phone call. These blocks put the live open status, the service area and a tap-to-call bar in front of the visitor before they scroll.
One command for the whole set
npx shadcn@latest add @facade/hero-local-business @facade/stats-band @facade/process-steps @facade/service-area @facade/testimonials-wall @facade/faq-section @facade/multi-step-lead-form @facade/cta-section @facade/footer-big @facade/sticky-contact-bar3 of these 10 blocks are Pro and install with a license key; the other 7 are free and MIT licensed. The @facade registry is set up once in components.json. Setup guide.
The page, block by block.
Every preview is the real block running at desktop width. Click a name to open its docs, props and source.
- Stats bandFree
- Process stepsFree
- Service areaPro
- FAQ sectionFree
- CTA sectionFree
Two ways to open the page.
Example hero copy for plumbers. Each one answers the question the visitor actually has.
Headline
Is someone available right now?
Why it works
Live open status in the hero and a tap-to-call bar at the bottom of the phone screen answer it in one second.
Headline
Do you come to my town?
Why it works
The ZIP checker on the service area map removes the doubt before the call, and sends out-of-area visitors to a waitlist.
Blocks on this page
- Hero, local businessFreeHome services hero with live rating, rotating service words and floating appointment, review and ETA cards.
- Stats bandFreeBand of four big animated numbers with labels, trends and hairlines that draw in on view.
- Process stepsFreeHow it works section with a line that draws on scroll and steps that light up as you pass them.
- Service areaProZone map with numbered service areas, city and ZIP lists, and a ZIP code checker with arrival windows.
- Testimonials wallProMasonry wall of Google and Yelp style reviews with a featured quote and aggregate rating header.
- FAQ sectionFreeTwo-column FAQ with an animated accordion, contact prompt and FAQPage JSON-LD for rich results.
- Multi-step lead formProThree step quote request with option cards, validation, progress bar and direction-aware transitions.
- CTA sectionFreeClosing CTA panel with headline, two actions and a reassurance line. Dark on light pages, light on dark.
- Footer, bigFreeLarge local business footer with animated newsletter, link columns, NAP, hours, socials and a giant wordmark.
- Sticky contact barFreeMobile bottom bar with Call, Text, Directions and Book that hides on scroll down and returns on scroll up.
Questions about plumber sites
Something else? Email hello@facadeui.com.
Which blocks does a plumber website need first?
The local business hero with the phone number, the service area map with a ZIP checker and the sticky mobile contact bar. Those three handle the emergency visitor. The quote form and the FAQ handle the planned job.
How does the sticky contact bar work on desktop?
It is mobile only by default. On a phone it shows Call, Text, Directions and Book, hides when the visitor scrolls down and returns when they scroll up. On desktop the hero and footer carry the phone number.
Can I show that we are open 24 hours?
Yes. The hours data accepts a 24 hour day per weekday, and the open-now logic reads it in the business time zone. The hero trust items can also carry a line such as 24/7 emergency service.
Do I need a backend for the quote form?
No. The multi-step lead form validates each step in the browser and hands the result to an onSubmit callback. Post it to a form service, an email API route or your CRM.
Related industries
- HVAC contractor10 blocks: local business hero, announcement bar, stats band
- Electrician10 blocks: local business hero, stats band, features bento
- Roofer10 blocks: local business hero, before / after slider, stats band
Read the plumber template, section by section or see all industries.