Class Schedule Hero

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, badge dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/fitness/fitness2.tsx instead.

Usage

The file also exports fitness2Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Fitness2, fitness2Demo } from "@/components/blocks/fitness/fitness2";

export default function Page() {
  return <Fitness2 {...fitness2Demo} />;
}

Props

Types

type ClassItem = {
  name: string;
  time: string;
  instructor: string;
  spotsLeft: number;
  capacity: number;
};

type ButtonItem = {
  label: string;
  href?: string;
  variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
};

Behavior notes

• The schedule card only renders when classes has at least one entry; the heading/description/buttons column always renders on its own.
• A class is shown as "Full" (outline badge) when spotsLeft is 0 or less, and as "N/capacity spots" (secondary badge) otherwise; this is computed from the two numbers, not a separate boolean flag.
• This is a page-section block (py-16 sm:py-24), not a full-viewport screen, so it can be dropped into a normal marketing page layout alongside other sections.
• View full schedule and Book a class are static links (render={<Link/>}) with no real booking flow behind them.