Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Birthday Month Wall Team Block for Svelte

Twelve months as hairline cells, each with the month's people as initials avatars in day order; hovering or focusing a face opens a card with the name, role and day, and no year or age appears anywhere.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A birthday wall for Svelte with Ark UI, written for Daventry, a fictional gift-registry app. A centred header counts the birthdays from the list ("22 birthdays, one wall"). Under it twelve months share their hairlines, rail to rail and ending the block: two across on a phone, three from sm, four from lg. A month is a heading with how many people it holds and their initials avatars in the order of their days; an empty month says "Nobody this month". Hovering or focusing a face opens a card with the person's name, role and day ("May 17"). There are only month names and days: never a year or an age, and nothing is worked out from today's date, so the block never goes stale. It is built from Avatar, Hover Card and Guides with your theme's tokens. The people are made up for the example.

FAQ

How do I change the birthdays?

Edit PEOPLE at the top of the file: each has a name, a role, a month (0 for January) and a day. Months are laid out from the fixed list of names and each month's people are sorted by day, so the order you write them in doesn't matter. The count in the header and in each month comes from the list.

How do people see the card without a mouse?

Every face is a real button, so the card opens when it takes keyboard focus as well as on hover, and its name is read out for screen readers whether or not the card is open. On a touch screen, where there is no hover, each cell writes out the names and days under the avatars instead.

How is the card wired?

Each avatar button is the Hover Card's trigger through asChild.

Why no year, no age and no this month?

A birthday is a month and a day. Showing a year or an age would date the block and say something people may not want said, and highlighting this month would need today's date, which a block rendered on a server shouldn't depend on. If you want a "this month" mark, add it where you render the block.

How does it fit on a phone?

Two months across, with each month at least one avatar row tall so the grid keeps its shape. Faces wrap inside their cell, and on a touch screen each person takes a row with their name and day beside the avatar.

Does it work right to left?

Yes. The faces and names follow the page direction, and the counts and days are wrapped in bdi.

All 126 team blocks