# Empty Calendar
> Stack of calendar cards marked empty, fanning out on hover
A shadcn/ui block from the [@affectui](https://www.affectui.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/affectui/empty-calendar).
- Page, with a live preview: https://shadcn.exchange/r/affectui/empty-calendar
- Screenshot: https://shadcn.exchange/shot/affectui/empty-calendar/light.png
- Registry item: https://www.affectui.com/r/empty-calendar.json
- Listed: 2026-11-01, source last changed 2026-11-01
## Install
```bash
npx shadcn@latest add https://shadcn.exchange/r/affectui/empty-calendar.json
```
Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.
## Files
### `illustrations/empty-calendar/empty-calendar.tsx`
```tsx
"use client";
import { useId } from "react";
/*
* Empty Calendar – a small card illustration, in a single self-contained file.
* Three stacked calendar cards with an "Empty" badge and a disabled "Join meeting" button.
* Hover the front card to lift it, hover a back card to slide it further out.
* The artwork is drawn on a 320 × 240 viewBox inside a 3 : 2 frame.
*/
export type EmptyCalendarProps = {
className?: string;
/** Accessible description of the scene */
label?: string;
};
export function EmptyCalendar({
className,
label = "Stacked calendar cards marked empty, with a disabled join meeting button",
}: EmptyCalendarProps) {
const id = "ui-ec" + useId().replace(/[^a-zA-Z0-9_-]/g, "");
return (
{/* React 19 hoists this into once, no matter how many instances render */}