Industries/ Fitness
Gym website components for React
Gym visitors want the membership price without a sales call and a feel for the floor at 6 am. Pricing with a monthly and yearly toggle, a features bento for classes and equipment, and opening hours answer both.
One command for the whole set
npx shadcn@latest add @facade/hero-local-business @facade/pricing-section @facade/features-bento @facade/team-grid @facade/stats-band @facade/testimonials-wall @facade/faq-section @facade/opening-hours @facade/cta-section @facade/footer-big3 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.
- Team gridFree
- Stats bandFree
- FAQ sectionFree
- Opening hoursFree
- CTA sectionFree
Two ways to open the page.
Example hero copy for gyms. Each one answers the question the visitor actually has.
Headline
What does a membership cost?
Why it works
Pricing with a monthly and yearly toggle and animated prices, with no sales call required.
Headline
Is it busy at 6 am?
Why it works
Opening hours with today highlighted and a class features bento with live micro animations.
Blocks on this page
- Hero, local businessFreeHome services hero with live rating, rotating service words and floating appointment, review and ETA cards.
- Pricing sectionProThree tier pricing with an animated monthly or yearly toggle, a dark featured plan and feature lists.
- Features bentoProSix cell bento grid with live micro animations: review counter, map pins, inbox stack, chart, toggle, booking.
- Team gridFreeTeam members grid with gradient initials avatars, bio reveal on hover, social links and a hiring card.
- Stats bandFreeBand of four big animated numbers with labels, trends and hairlines that draw in on view.
- 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.
- Opening hoursFreeWeekly hours list with today highlighted, live open status, split shifts and closed days.
- 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 gym sites
Something else? Email hello@facadeui.com.
How do I show membership tiers?
Three tiers in the pricing section: basic, plus and all access. The toggle switches monthly and yearly prices and the yearly badge shows the saving you define.
Can the opening hours show 24 hour access?
Yes. Set a weekday to a 24 hour range and the status reads Open. You can add a note such as staffed hours 6 to 22 under the list.
What goes in the features bento for a gym?
Classes, equipment zones, personal training, a sauna or recovery area, the app, and childcare if you have it. One idea per cell.
Should the trainers be on the home page?
Yes, with the team grid. Trainers are a reason to join. Bios reveal on hover and the hiring card can be switched off.
Related industries
- Yoga studio10 blocks: local business hero, service menu, sliding tabs
- Chiropractor10 blocks: local business hero, stats band, process steps
- Barber shop10 blocks: local business hero, service menu, team grid
Read the gym template, section by section or see all industries.