Calendar Pad Cards
Contribution-graph style cards where the coloured squares are the navigation. Each card lays out five rows of pads, the first and last rows are decorative, and as many of the middle pads as there are entries are picked at random, coloured, and made clickable. Opening one does not slide a panel in: the pad itself is scaled twenty times until it fills the card, which is why the detail view arrives in the accent colour of the square you pressed. The content then springs in on an elastic ease with each block entering from a random tilt, and closing runs the whole thing backwards before clearing the props.
npx shadcn@latest add https://ui.aryank.space/r/calendar-pad-cards.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| months | CalendarPadMonth[] | 4 BLANK months | One card per month. The number of entries sets how many pads light up, so a month with one entry gets one square. |
| activeColors | string[] | 4 accents | Sampled per pad, so a card usually shows several colours. |
| brand / navItems | string / string[] | BLANK copy | Navigation row above the cards. |
activeColorstextPalette drawn from for the clickable pads.
backLabeltextLabel on the close button.
gsap