Components
Loading preview...
The 3D Wall Calendar component transforms a traditional month view into an immersive, interactive 3D wall of days. Each day is represented as a panel, arranged in a grid-like wall, where users can tilt, scroll, or drag to change the perspective. Events appear as floating markers on these panels and can be clicked to reveal details inside neatly styled popovers. Navigation controls allow switching between months, while an inline form lets users add events directly to specific dates. This design not only makes browsing a month visually engaging but also provides a futuristic feel to event management, blending functionality with a dynamic 3D user experience.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/three-dwall-calendar"use client"
import * as React from "react"
import { ThreeDWallCalendar, CalendarEvent } from "@/components/ui/three-dwall-calendar"
import { v4 as uuidv4 } from "uuid"
export default function Demo3DWallCalendar() {
const [events, setEvents] = React.useState<CalendarEvent[]>([
{ id: uuidv4(), title: "Sprint Planning", date: new Date().toISOString() },
{ id: uuidv4(), title: "Design Handoff", date: new Date(new Date().getTime() + 24*60*60*1000).toISOString() },
{ id: uuidv4(), title: "Demo", date: new Date(new Date().getTime() + 3*24*60*60*1000).toISOString() },
])
const addEvent = (ev: CalendarEvent) => setEvents((p) => [...p, ev])
const removeEvent = (id: string) => setEvents((p) => p.filter(e => e.id !== id))
return (
<div className="p-6">
<h1 className="text-2xl font-semibold mb-4">3D Wall Calendar Demo</h1>
<ThreeDWallCalendar events={events} onAddEvent={addEvent} onRemoveEvent={removeEvent} />
</div>
)
}