shadcn.io is not affiliated with official shadcn/ui
Birthday Month Wall Team Block for React
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.
Installation
Overview
A birthday wall for React with Base 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.
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.
Related
- Pro
Anniversaries Team
Numbers and historyA tenure ladder: bands for 10, 5, 3 and 1 years, each with its count and the people in it, under a retention figure computed from the cohort it counts.
- Pro
Arrivals Ruler Team
Numbers and historySix people who joined a delivery-routing API this quarter, pinned on a twelve-week ruler above the week they started, then listed newest first with where they worked before and what to ask them about.
- Pro
Hover Card Mosaic Team
Grids and wallsThe planners of an interior-planning studio as a mosaic of mixed spans that shares its hairlines: a two-by-two lead cell, two wide cells, three small ones and a +12 cell, each person a link with a hover card that opens on hover and on focus.
- Pro
Grid Reveal Team
Grids and wallsEight people of a vet-booking tool in a hairline grid where picking a cell opens a full-width band right under its row: a quote, two skills and what to ask the person about, with the picked cell marked by a bar.
- Pro
Contact Grid Team
Grids and wallsSix people of a legal-intake service in cells that stand apart, each an initials avatar with a presence dot and the same state in words, a role, an address and an outline Copy email button that copies it and confirms in place.
- Pro
Animated Counter Team
Numbers and historyA short strip of four centred people figures that roll up once as they scroll into view, over a closing row with the newest eight people as initials.