glasscn
Glass Calendar

A date picker calendar with glass panel styling.

May 2026
import { GlassCalendar } from "@/components/ui/glasscn/glass-calendar"

export function CalendarDemo() {
  return <GlassCalendar glassVariant="liquid-bold" mode="single" />

Installation

$ npx shadcn add @glasscn/glass-calendar

API

Prop
Type
Default
Description
GlassCalendarglassVariant
"clear" | "frosted" | "subtle" | "liquid" | "liquid-bold""clear"
Controls the glass surface treatment.
GlassCalendar...props
React.ComponentProps<typeof Calendar>-
Props from the underlying shadcn/ui primitive.

Variants

clear
May 2026
frosted
May 2026
subtle
May 2026
liquid
May 2026
liquid-bold
May 2026