Components
Returns Calendar
Monthly returns heat grid: years by months, diverging green/red cells scaled by magnitude, plus a compounded year-total column. Hovering a cell reads the month and its return into the header. Light and dark via shadcn theme tokens; respects reduced motion.
import { useEffect } from "react"
import { Demo } from "@/components/ui/returns-calendar"
export default function DemoOne() {
// open the preview in dark by default; the sandbox theme toggle still works
useEffect(() => { document.documentElement.classList.add("dark") }, [])
return (
<div className="w-full">
<Demo />
</div>
)
}
Dependencies
Published
Similar components
Explore more
Part of ssicevs — browse the full library on 21st.dev.