Industries/ Home services
Electrician website components for React
Electrical work sells on trust and a clear price path. The set below leads with license and insurance facts as animated stats, explains the three step quote process and keeps the contact section full of real details.
One command for the whole set
npx shadcn@latest add @facade/hero-local-business @facade/stats-band @facade/features-bento @facade/process-steps @facade/service-area @facade/review-marquee @facade/faq-section @facade/contact-section @facade/cta-section @facade/footer-big4 of these 10 blocks are Pro and install with a license key; the other 6 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 electricians. Each one answers the question the visitor actually has.
Headline
Are they licensed and safe?
Why it works
License number, insurance coverage and years in business as animated stats right under the hero.
Headline
What will it cost?
Why it works
A three step quote request with option cards for panel upgrades, EV chargers and rewiring instead of a blank textarea.
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.
- Features bentoProSix cell bento grid with live micro animations: review counter, map pins, inbox stack, chart, toggle, booking.
- 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.
- Review marqueeProTwo rows of customer review cards scrolling in opposite directions with soft faded edges.
- FAQ sectionFreeTwo-column FAQ with an animated accordion, contact prompt and FAQPage JSON-LD for rich results.
- Contact sectionProContact form with floating labels and inline validation, plus NAP details, live open-now hours and a map card.
- 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.
Questions about electrician sites
Something else? Email hello@facadeui.com.
Where do I put the license number?
In the stats band as the first stat, and again in the footer legal line. Both blocks take plain strings, so a license number with letters renders fine.
What goes in the features bento for an electrician?
Six cells for the services that bring the higher margin jobs: panel upgrades, EV charger installs, lighting, rewiring, inspections and emergency calls. Each cell has a title, a line of copy and a live micro animation.
Can the review marquee use our Google reviews?
Yes. Pass an array of reviews with name, text, rating and source. Export them from your Google Business Profile or paste them by hand. The block does not call the Google API.
Does the contact section show opening hours?
Yes. It takes weekly hours and a time zone and renders the list with a live open or closed status next to the form, the address and the map link.
Related industries
- Plumber10 blocks: local business hero, stats band, process steps
- HVAC contractor10 blocks: local business hero, announcement bar, stats band
- Roofer10 blocks: local business hero, before / after slider, stats band
Read the electrician template, section by section or see all industries.