Glass Calendar

Component

About

A date-picker calendar built on react-day-picker with pill-shaped day cells and a blue accent for the selected date, today marker and hover states.

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

Code

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

Usage.tsx

"use client";

import * as React from "react";

import GlassCalendar from "@/components/ui/glass-calendar";

export default function GlassCalendarDemo() {
  const [selected, setSelected] = React.useState<Date | undefined>(new Date());

  return (
    <div className="flex items-center justify-center p-6 bg-background text-foreground">
      <GlassCalendar
        mode="single"
        selected={selected}
        onSelect={setSelected}
        today={new Date()}
        defaultMonth={new Date()}
        className="rounded-2xl border border-foreground/10 bg-card/60 backdrop-blur-md shadow-lg"
      />
    </div>
  );
}