Components
Loading preview...
The Origami Fold-Out Calendar is an interactive event tracker that combines creativity with utility. Each day of the selected month is displayed as a foldable accordion item, resembling origami sheets that unfold to reveal details. Users can scroll through the month, add events with a title and date, and see them neatly organized under the corresponding day. When expanded, each day shows its scheduled events, which can be removed with a single click. The month dynamically adjusts to display the correct number of days—28, 29, 30, or 31—based on the selected month and year. This design not only provides a visually engaging way to view schedules but also makes it easy to navigate across months, offering both practicality and a playful “fold-out” aesthetic.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/origami-fold-out-calendarimport { OrigamiFoldOutCalendar } from "@/components/ui/origami-fold-out-calendar"
export default function Page() {
return (
<div className="max-w-4xl mx-auto p-6">
<h1 className="text-2xl font-semibold mb-6">Origami Fold-Out Calendar</h1>
<OrigamiFoldOutCalendar />
</div>
)
}