Industries/ Fitness
Yoga studio website components for React
Beginners need to know which class is for them and whether they can try once. Sliding tabs per level, a drop-in tier in the pricing and a class booking picker make the first visit easy.
One command for the whole set
npx shadcn@latest add @facade/hero-local-business @facade/service-menu @facade/sliding-tabs @facade/team-grid @facade/pricing-section @facade/review-marquee @facade/faq-section @facade/booking-slots @facade/location-card @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.
- Sliding tabsFree
- Team gridFree
- FAQ sectionFree
- Location cardFree
Two ways to open the page.
Example hero copy for yoga studios. Each one answers the question the visitor actually has.
Headline
Which class is for beginners?
Why it works
Sliding tabs per level with class descriptions, so a first timer finds the right room.
Headline
Can I try once before a membership?
Why it works
Pricing with a drop-in tier and an intro offer in the badge, next to the unlimited plans.
Blocks on this page
- Hero, local businessFreeHome services hero with live rating, rotating service words and floating appointment, review and ETA cards.
- Service menuProTabbed price list for salons, barbers and spas with durations, Popular tags and animated transitions.
- Sliding tabsFreeAccessible tabs with a spring animated sliding pill, arrow key navigation and a soft content crossfade.
- Team gridFreeTeam members grid with gradient initials avatars, bio reveal on hover, social links and a hiring card.
- Pricing sectionProThree tier pricing with an animated monthly or yearly toggle, a dark featured plan and feature lists.
- 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.
- Booking slotsProAppointment picker with a 14 day date strip, grouped time slots, summary and confirm callback.
- Location cardFreeStylized SVG map card with a dropped pin, address, hours, phone and a Google Maps directions link.
- Footer, bigFreeLarge local business footer with animated newsletter, link columns, NAP, hours, socials and a giant wordmark.
Questions about yoga studio sites
Something else? Email hello@facadeui.com.
How do I show a class schedule?
Use the sliding tabs with one tab per weekday or per level and list the classes inside. For live booking, the booking slots block takes a getSlots function that can read your schedule.
Can the service menu list class types?
Yes. Treat each class type as a service with a duration and a drop-in price. Tabs can separate yoga, pilates and workshops.
How does the drop-in tier work in the pricing block?
Add it as the first tier with the same price for monthly and yearly, or hide the toggle for that tier by setting both prices equal. The featured tier stays your membership.
Does the location card show hours?
Yes, a short hours line and the phone number, plus a directions link. For full weekly hours add the opening hours component.
Related industries
- Gym10 blocks: local business hero, pricing section, features bento
- Chiropractor10 blocks: local business hero, stats band, process steps
- Salon10 blocks: local business hero, service menu, image gallery lightbox
Read the yoga studio template, section by section or see all industries.