Components
Loading preview...
The Inbox-Style Calendar is a modern, list-based scheduling component that organizes events in a format similar to an email inbox. Instead of the traditional grid or wheel layout, events are displayed chronologically under their respective dates, making it perfect for users who manage event-heavy schedules. With the integration of the shadcn UI calendar, users can easily pick dates and add events directly into the timeline, while existing events can be expanded for details or removed with a single action. Its minimal design, smooth animations, and card-based entries ensure clarity and usability, offering an efficient way to manage and visualize busy schedules without overwhelming the user. This component is ideal for productivity apps, dashboards, and any platform that prioritizes quick event management and readability.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/inbox-calendar"use client"
import * as React from "react"
import { InboxCalendar, InboxEvent } from "@/components/ui/inbox-calendar"
import { v4 as uuidv4 } from "uuid"
export default function InboxCalendarDemo() {
const [events, setEvents] = React.useState<InboxEvent[]>([
{
id: uuidv4(),
title: "Team Standup",
description: "Daily sync with the dev team.",
date: new Date(2025, 8, 25, 10, 0),
label: "Work",
},
{
id: uuidv4(),
title: "Lunch with Sarah",
description: "Catch up at the cafe near office.",
date: new Date(2025, 8, 25, 13, 0),
label: "Personal",
},
])
const handleAdd = (event: InboxEvent) => {
setEvents((prev) => [...prev, event])
}
const handleRemove = (id: string) => {
setEvents((prev) => prev.filter((e) => e.id !== id))
}
return (
<div className="p-6 flex justify-center">
<InboxCalendar
events={events}
onAddEvent={handleAdd}
onRemoveEvent={handleRemove}
/>
</div>
)
}