shadcn.io is not affiliated with official shadcn/ui
Birthday Tracker Calendar Block for Svelte
The next twelve birthdays sorted by days to go with ages worked out from birth dates and a gift-sorted checkbox, or a month with a mark on every birthday and the people of the chosen day listed under it.
Installation
Overview
Never miss a birthday with this birthday tracker for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a Segment Group that switches between a list and a month. The list shows the next twelve birthdays soonest first, each with an initials Avatar, the person's name and relation, the age they turn and the date, "Today", "Tomorrow" or "In 12 days" worked out from the fixed "now" of 14 October 2026 and their typed birth date, and a Checkbox for "Gift sorted" with a tally of how many are done. Seven rows show first and a button reveals the rest. The month is the Calendar with a mark on every day that has a birthday, in a different shape for family, friends and work, with the people of the chosen day under it, or an Empty state that points to the next birthday. The calendar's own marker for today is switched off and the fixed "now" carries a ring. The bands are ruled by Guides. It's built from Segment Group, Calendar, Checkbox, Avatar, Badge, Empty, Button and Guides, with a CSS entrance only. For reminder apps, family organizers and team pages.
FAQ
How do I fill it with my people?
Edit PEOPLE. Each has an id, a name, initials, a relation, a mark for the month view and a born date as an ISO string. Only the day and the month of born repeat; the year gives the age. The days until, the age a person turns and the sort order are all worked out from those dates and the fixed "now", so none is typed.
Why is today always 14 October?
Nothing in the block reads the clock. AS_OF is the one moment the block treats as now, so "Today", "Tomorrow" and "In 12 days" look the same on any day and in a screenshot. To follow the real date set AS_OF from your own clock and keep the rest. The calendar's own today marker is switched off so that it can't disagree with the ring.
How does the month view work?
Choosing a day, with a click or the arrow keys, lists the people whose birthday falls on it, with the age they turn that year. The marks under the days are a dot for family, a ring for friends and a diamond for work, with the words in the key under the calendar. Use the month and year menus or the arrows to move; the menus reach from January 2026 to December 2027.
Do the Gift sorted ticks stay?
No. They live in the page and reset on reload, and a polite status line says each change ("Gift sorted for Casimir Ostrow. 3 of 12 sorted."). To keep them, save the ticked ids from tick to your own store and start sorted from them.