shadcn.io is not affiliated with official shadcn/ui
Week Board Blog Block for React Aria
A news digest's week as five columns, Monday to Friday, each with a huge day numeral and that day's posts or a quiet 'No post', in a snap scroller on phones.
Installation
Overview
A week board for React with React Aria, written for Weekbook, a news digest. A centred header ("8 posts from Monday to Friday") sits over five columns on shared hairlines that run from rail to rail and end the block. Each column opens with the weekday and the day's numeral set huge, a typographic cover, then the day's one to three posts, each a category badge and a title that is the row's one link, or a quiet "No post". The count is worked out from the posts. Below lg the columns become a snap scroller with the next day peeking in. It's built from Badge and Guides, with CSS for the entrance and no JavaScript. For news digests, weekly roundups and any blog that thinks in weeks.
FAQ
How do I change the week?
Edit WEEK at the top of the file: each day is { date, numeral, weekday, posts }. Leave posts empty for a day with nothing and the column says "No post". The header count is the sum of every day's posts.
How does the phone scroller work?
Below lg the list becomes a horizontal scroller with snap points, each column about three quarters of the width so the next day peeks in. It has no scroll buttons: swiping, the keyboard (Tab moves through the links and scrolls them into view) and the scroll wheel all work.
Are the big numerals read out?
The numeral is decoration, hidden from assistive technology; the weekday is a time element with the date, and the day number is added in text for screen readers ("Monday 14").