Weekly Class Schedule

A weekly class schedule with Mon-Sun tabs. Each day lists its classes with the instructor's avatar, class name, duration, spots remaining, and a difficulty badge (Beginner, Intermediate, or Advanced), plus a Reserve button per class.

By Staaarter Team

Booking

Docs

Live preview

Docs

Installation

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

npx shadcn add https://staaarter.com/r/weekly-class-schedule.json

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

Usage

The file also exports booking21Demo, 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 { Booking21, booking21Demo } from "@/components/blocks/booking/booking21";

export default function Page() {
  return <Booking21 {...booking21Demo} />;
}

Props

Prop	Type	Default	Description
heading	string	"Weekly class schedule"	Section heading.
description	string	"Book your spot in one of this week's classes."	Short subheading under the heading.
days	Booking21Day[]	[]	Days of the week, each rendered as a tab with its own classes.
defaultDay	string	"mon"	Value of the tab selected by default.
className	string	none	Extra classes for the outer section element.

Types

type Booking21Difficulty = "Beginner" | "Intermediate" | "Advanced";

interface Booking21Class {
  id: string;
  name: string;
  instructorName: string;
  instructorAvatarUrl?: string;
  duration: string;
  spotsRemaining: number;
  difficulty: Booking21Difficulty;
}

interface Booking21Day {
  value: string;
  label: string;
  classes: Booking21Class[];
}

Behavior notes

Day switching is real (via the Tabs primitive) but reserving a spot is decorative: the Reserve button has no click handler.

More Booking Blocks

View all →

date-time-picker

Date & Time Picker

Split-panel scheduler: a real monthly calendar on the left, morning/afternoon time slots on the right, and a live booking summary footer.

reservation-summary

Reservation Summary

A static booking confirmation card with service, date/time, provider avatar, price breakdown, promo code field, and cancellation policy.

appointment-list

Appointment List

Upcoming and past appointments grouped by date, with provider avatar, status badge, and reschedule/cancel actions.

service-selector

Service Selector

Category-tabbed grid of bookable services with icon, description, duration, and price.

provider-picker

Provider Picker

A selectable grid of staff/provider cards with rating, reviews, availability, and an Any Provider fallback.

restaurant-reservation

Restaurant Reservation

Table reservation form with a guest stepper, date/time inputs, seating pills, and a live summary panel.