Components
Loading preview...
This is a fully interactive, motion-enhanced Coach Scheduling Card that allows users to view a coach’s weekly availability, select time slots, choose a location, and confirm bookings—all in a single animated, responsive UI. It blends profile preview, dropdown logic, availability grids, and confirmation flows into a seamless component with thoughtful framer-motion effects throughout. Animations are conditionally toggled for accessibility, and the UI adapts to user actions in real-time. Perfect for fitness apps, tutoring platforms, service marketplaces, or any SaaS tool offering human-led bookings with sleek UX.
npx shadcn@latest add https://21st.dev/r/isaiahbjork/coach-scheduling-card"use client";
import { useState } from "react";
import { CoachSchedulingCard } from "@/components/ui/coach-scheduling-card";
export default function Demo() {
const [selectedTimeSlot, setSelectedTimeSlot] = useState<{day: string, time: string} | null>(null);
const [selectedLocation, setSelectedLocation] = useState<string>("");
const handleTimeSlotSelect = (day: string, time: string) => {
setSelectedTimeSlot({ day, time });
console.log(`Selected: ${day} at ${time}`);
};
const handleLocationChange = (location: string) => {
setSelectedLocation(location);
console.log(`Location changed to: ${location}`);
};
const handleWeekChange = (direction: "prev" | "next") => {
console.log(`Week navigation: ${direction}`);
};
return (
<div className="min-h-screen bg-background p-8">
<div className="max-w-xl mx-auto space-y-8">
<div className="flex justify-center">
<CoachSchedulingCard
onTimeSlotSelect={handleTimeSlotSelect}
onLocationChange={handleLocationChange}
onWeekChange={handleWeekChange}
/>
</div>
</div>
</div>
);
}