Cadence: Scheduling template
Book meetings without the back-and-forth.
For scheduling and booking products: split hero, a working booking demo, steps, integrations, pricing, a quote marquee, FAQs and a wizard signup.
About the Cadence template
Cadence is built for booking and calendar products. A split hero is followed by a working booking calendar visitors can try, setup steps, calendar and video integrations, three tiers, a quote marquee, FAQs and a sign-up wizard.
Book meetings without the back-and-forth. It is a complete scheduling landing page for React and Tailwind CSS 4, assembled from 10 Charcoal UI sections.
Who Cadence is for
- Scheduling links and calendar tools.
- Appointment booking for teams.
- Coaching and consulting platforms.
- Sales routing tools.
What is inside
10 sections, top to bottom:
- Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
- Hero Split: Copy on the left, a live product window on the right with a stat card and a chart that draw themselves in.
- Contact Booking: Book-a-demo block: pick a day, pick a slot and confirm without leaving the page.
- Features Steps: Numbered how-it-works steps joined by a line that draws itself as the section scrolls in.
- Features Integrations: Searchable integrations directory with category filters, monogram tiles and a request link.
- Pricing Tiers: Three plans with a monthly/yearly switch; prices roll to the new amount and the popular plan glows.
- Testimonials Marquee: Two rows of quotes drifting in opposite directions, pausing on hover.
- FAQ Split: Heading and contact link on the left, a springy accordion on the right.
- CTA Steps: Sign-up CTA as a three-step mini wizard, so visitors arrive half onboarded.
- Footer Columns: Brand, four link columns, a newsletter field and a bottom bar.
How it is built
The booking block uses a real calendar with weekends disabled and your own time slots. Every section is a separate Charcoal UI section, so you can reorder, remove or restyle any of them, and the accent colour is one CSS variable on the page wrapper.
Install Cadence
npx shadcn@latest add @charcoal/cadenceTemplates are part of Charcoal UI Pro. One seat covers all 100 templates, 107 sections and 300 Pro components. The command installs the page and every section and component it uses, so it runs the moment it lands.
Frequently asked questions
- Can I use Cadence for a client site?
- Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
- Is Cadence a Next.js template?
- It is a React 19 page that works in Next.js (App Router or Pages Router), Vite, Remix and Astro. Drop it into a route and it renders.
Sections in this template
- Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
- Hero Split: Copy on the left, a live product window on the right with a stat card and a chart that draw themselves in.
- Contact Booking: Book-a-demo block: pick a day, pick a slot and confirm without leaving the page.
- Features Steps: Numbered how-it-works steps joined by a line that draws itself as the section scrolls in.
- Features Integrations: Searchable integrations directory with category filters, monogram tiles and a request link.
- Pricing Tiers: Three plans with a monthly/yearly switch; prices roll to the new amount and the popular plan glows.
- Testimonials Marquee: Two rows of quotes drifting in opposite directions, pausing on hover.
- FAQ Split: Heading and contact link on the left, a springy accordion on the right.
- CTA Steps: Sign-up CTA as a three-step mini wizard, so visitors arrive half onboarded.
- Footer Columns: Brand, four link columns, a newsletter field and a bottom bar.