Flux, Cadence, Relay and Artifact: Tailwind templates for Next.js and Astro
Apex
Next.js and Astro roofing template with trade pages and before-after sliders

- Website
- shadcnblocks.com
- Pricing
- Paid
- Categories
- Templates
- Listed
- Jul 2026
- Updated
- Oct 2026
Details about Apex
- Tailwind CSS v4
Short verdict: Apex gives a roofer or another exterior contractor a 19-page site with the content already written, including five service pages, 19 FAQs, six blog posts and 31 before-and-after sliders. Lead capture is the weak spot: the booking calendar only drafts an email and the contact form does nothing on submit. The demo pages are also heavy, at about 12.6 MB for the home page. It suits a developer or agency building a site for a roofing, gutter, siding or window company. It is the wrong buy if you need bookings that work without development, or copy for a trade far from roofing.
How we reviewed it: On 21 October 2026 we used the live Astro demo on a desktop and on a 390 px phone screen, and repeated the booking and contact form tests on the Next.js demo. We picked towns, dates and times in the calendar, submitted the contact form, dragged the sliders, checked all 19 pages for sideways scrolling, and ran Lighthouse 12.8.2 on the home and roofing pages. We did not buy the source code, so we can't judge code quality or how the MDX content is organized. Prices, specs and license terms come from the Shadcnblocks site on 20 and 21 October 2026.
Disclosure: Shadcnblocks, the maker of Apex, sponsors Tailkits, and our links to it are affiliate links, so Tailkits may earn a commission if you buy through them.
What you get for $79
| Price | $79 one-time, including the Next.js and Astro editions. Also part of the Shadcnblocks Premium plan ($299 one-time, 21 templates). |
|---|---|
| Version | 1.0.0, released and last updated 31 July 2026 |
| Size | 19 pages and 70+ components, per Shadcnblocks. Both demo sitemaps list the same 19 URLs, six of them blog posts and two legal pages. |
| Stack | shadcn/ui, Tailwind CSS 4, TypeScript and MDX, with Motion and GSAP for animation, per Shadcnblocks. The demos run Next.js 16.1.7 and Astro 6.4.8 with React components. |
| Deploys to | Vercel, Netlify and Cloudflare Pages, as tested by Shadcnblocks |
| License | Unlimited end products, including client sites, for one user (a Team license covers up to 10). You can't resell the template itself. License terms |
What we found in the demo
A booking calendar that drafts an email
The home page ends with a booking widget: a picker with 11 Texas Hill Country towns, a month calendar and a list of times. Past days and Sundays are greyed out, and each day we tried offered the same 15 half-hour slots from 8:00am to 4:00pm, with a lunch gap. Each slot is an email link. After we picked Kerrville, Tuesday 27 October and 10:30am, it addressed a message to the sample address reading "I'd like to book a free roof estimate in Kerrville on Tuesday, October 27 at 10:30am." Nothing is reserved, availability is not checked, and no name or phone number is collected.

Estimate and contact forms that are not wired up
The estimate card in the home hero has Service and Timeline dropdowns, but its button only scrolls to the calendar and the choices go nowhere. The contact page form asks for name, phone, email, address, town, service, timeline and details, none of them required. Submitting it sends no request and shows no message: its submit handler only cancels the default action. The Next.js demo behaves the same way, calendar included.
31 before-and-after sliders
The comparison slider appears once on the home page, twice on each service page and four times per trade on the services overview. It responded to dragging, clicks, a phone swipe and the arrow keys (5% per press, with Home and End jumping to the edges), and it is labeled as a slider for screen readers. The home page's sample pair shows two different roofs, so plan to photograph real jobs from the same angle.

Content written for five exterior trades
Roofing, gutters, siding, windows and masonry each get a service page; the roofing page has a services carousel, crew profiles and links to the other trades. The FAQ page groups 19 questions under five headings and adds a nine-term roofing glossary, and the about page has a company timeline and team cards. Nearly all of it is written for roofing in the Texas Hill Country (hail, insurance claims, storm tarping), so a painter or landscaper would replace most of the copy.
Mobile
On a 390 px screen none of the 19 pages scrolls sideways. The menu holds every section, the phone number and a Free Estimate button, and the booking widget stacks into one column.
Performance and SEO
One Lighthouse 12.8.2 run per page, 21 October 2026:
| Page | Performance | Accessibility | Best practices | SEO |
|---|---|---|---|---|
| Home, mobile | 73 | 100 | 100 | 100 |
| Home, desktop | 98 | 100 | 100 | 100 |
| Roofing service, mobile | 75 | 100 | 100 | 100 |
| Roofing service, desktop | 96 | 100 | 100 | 100 |
Page weight is the problem. The home page transfers 12.6 MB in 133 requests, including a 2.3 MB autoplaying hero video and 9.9 MB of images. None of its more than 100 image tags has a srcset attribute or lazy loading, so phones download full-size photos; Lighthouse estimates 6.5 MB of savings. The roofing page weighs 4.9 MB. Mobile largest contentful paint was 6.2 s on the home page and 7.4 s on the roofing page, 5.4 s of it render delay in both cases. On both pages the hero heading starts hidden in the server HTML and waits for JavaScript to animate in; with JavaScript off, the roofing page's hero stays blank. Accessibility had no failed audits.
Every page outputs RoofingContractor structured data with the phone, email, 11 towns served and opening hours. Service pages add Service markup, blog posts BlogPosting, and the FAQ page marks up all 19 questions. The RoofingContractor markup also carries the demo's rating, 4.9 from 1,200 reviews, on every page. Remove it or use real figures: Google does not show stars for ratings a local business publishes about itself, and a made-up 4.9 misleads customers.
What you still have to build
Booking. Connect the calendar to a scheduling service or backend that checks real availability and collects contact details.
Lead capture. Give the contact form a handler (email service, CRM or form backend), validation and a confirmation message.
The sample email. Replace [email protected] in the booking links and structured data first. Its domain had live mail servers when we checked, so unedited requests could reach a real inbox.
Claims and badges. The demo claims GAF Master Elite, Owens Corning Preferred Contractor and BBB A+ status, names eight manufacturers it is "certified by", and promises a 25-year warranty and 0% financing. Keep only what is true.
Images. Resize the photos, add responsive sizes and lazy loading, shrink or drop the hero video, and use real job photos in the sliders.
Pros and cons
Pros
Trade-specific content across 19 pages, so you edit copy rather than write it.
Before-and-after sliders that work with mouse, touch and keyboard.
Local business structured data on every page, plus Service, BlogPosting and FAQ markup.
100 for accessibility, best practices and SEO on both tested pages.
One $79 purchase covers Next.js and Astro, both with public demos, and the license allows client work.
Cons
Booking and the contact form are front ends only.
Heavy pages with no responsive images: 6.2 s mobile LCP on the home page in our run.
A sample rating in the structured data, plus certifications and statistics to replace before launch.
Hero text stays hidden until JavaScript runs.
The copy is tied to roofing in one region.
How Apex compares
Shadcnblocks Premium ($299 one-time) includes Apex and 20 other templates, among them Verdict for law firms and Munch for restaurants. Worth it for an agency that builds sites for several kinds of local business.
Aspect is Shadcnblocks' corporate template: $79 for both editions, 16 pages and 100+ components, per Shadcnblocks. Pick it for a company that isn't a trade, where you would rewrite Apex's roofing copy anyway.
Biztrox Astro from Themefisher is a $77 Astro business theme with 19 pages, including services, projects and team pages, and contact form support, per Themefisher. We have not tested it. Consider it if you want a projects page and don't need shadcn/ui or Next.js.
See all company templates for more options.
Who should buy Apex
Buy it if you are building a site for a roofer or another exterior contractor and have a developer who can connect booking and the lead form and slim down the images. Look elsewhere if the client needs online booking without development work, or works in a trade where most of the roofing copy would need replacing.
FAQ
Does Apex take bookings and leads on its own?
No. The booking calendar opens an email draft with the town, date and time filled in, and the contact form does nothing when submitted. You connect both to a scheduling service, an email service or a CRM yourself.
Do I get both the Next.js and Astro versions?
Yes. The $79 purchase includes both editions, and each has a public demo. We tested the Astro demo in full and repeated the booking and contact form tests on the Next.js demo.
Can I use Apex for a trade other than roofing?
Yes, with rewriting. The demo already has pages for gutters, siding, windows and masonry, but the FAQs, glossary, blog posts and most other copy are written for roofing in the Texas Hill Country.
Can I use Apex for client projects?
Yes. The Shadcnblocks license allows unlimited end products, including sites your clients own. A standard license is for one person; the Team license covers up to 10 people.
Is Apex included in a Shadcnblocks plan?
Yes. The Premium plan ($299 one-time) includes Apex and 20 other premium templates.


