Spring Calendar

An animated calendar widget that expands to reveal events and features smooth, spring‑based Motion‑V transitions.

API

Prop Name	Type	Default	Description
`calendarData`	`Array<{ month: string; date: number; day: string; events?: { title: string; day: string; time: string }[] }>`	—	Array defining each calendar day and its optional events. Required.
`initialIndex`	`number`	`0`	Day index initially selected.

Event	Payload	Description
`update:activeIndex`	`number`	Fires when a day button is clicked, emitting the new active index.

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://inspira-ui.com/r/spring-calendar.json"

Copy and paste the following code

SpringCalendar.vue

TextMorph.vue

Spring Animations — Uses MotionConfig to apply realistic spring/bounce transitions when height changes.
Dynamic Height — The outer card automatically grows to fit event listings.
TextMorph Integration — Day labels morph smoothly via the TextMorph sub‑component.
Interactive Day Picker — Clickable day chips with hover/press scale effects.
Responsive Layout — Flexbox layout that wraps chips and events neatly.

On This Page