Year in Dots

A year progress card that maps every day to an animated dot.

Click the card to replay the staggered dot animation. The calendar refreshes when the date changes.

Options you can pass to customize this component.

Prop
Type
Description
elapsedColor
string

Color used for reached days.

remainingColor
string

Color used for future days.

className
string

Additional CSS classes for the card.

npx shadcn add amitgajare2/ariseui/year-in-dots
Year in Dots