Glass Calendar
A date picker calendar with glass panel styling.
August 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
import { GlassCalendar } from "@/components/ui/glasscn/glass-calendar"
export function CalendarDemo() {
return <GlassCalendar glassVariant="liquid" mode="single" />Installation
$ npx shadcn add @glasscn/glass-calendarVariants
clear
August 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
frosted
August 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
subtle
August 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
liquid
August 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
liquid-refract
August 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
API
Prop
Type
Default
Description
GlassCalendar
glassVariant"clear" | "frosted" | "subtle" | "liquid" | "liquid-refract""clear"Controls the glass surface treatment.
GlassCalendar
...propsReact.ComponentProps<typeof Calendar>-Props from the underlying shadcn/ui primitive.