Card

Cards 60

About

Availability Slot Card This component displays a card with a title and a grid of selectable date slots. It is fully responsive and uses framer-motion for smooth animations.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Card to your project and fits it to your theme.

Code

How Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react";
import { AvailabilityCard, Slot } from "@/components/ui/card-13";

// Sample data for the demo
const sampleSlots: Slot[] = [
  { id: 1, day: 12, month: "June" },
  { id: 2, day: 18, month: "June" },
  { id: 3, day: 20, month: "June" },
  { id: 4, day: 2, month: "July" },
  { id: 5, day: 10, month: "July" },
  { id: 6, day: 15, month: "July" },
];

/**
 * A demo component to showcase the AvailabilityCard.
 */
export default function AvailabilityCardDemo() {
  // State to manage the currently selected slot
  const [selectedSlot, setSelectedSlot] = React.useState<string | number | null>(sampleSlots[0].id);

  return (
    <div className="flex h-screen w-full items-center justify-center bg-background p-4">
      <AvailabilityCard
        slots={sampleSlots}
        selectedSlotId={selectedSlot}
        onSlotSelect={setSelectedSlot}
      />
    </div>
  );
}