Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Blog blocks

Pro

Week Board Blog Block for React

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.

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 week board for React with Base UI, 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").

How are the columns separated?

By one-pixel gaps over a border-coloured background, so every edge is a single hairline, with the rails and the top rule drawn by Guides. On a phone each column has its own end border instead.

Does it work right to left?

Yes. The columns run from the end side, the scroller starts at the end and the counts are isolated with bdi.

  • Pro

    Agenda Schedule Blog

    Archives by date

    A newsroom's upcoming posts as an agenda grouped by day, with a Select that shows every time in UTC, New York or Tokyo, in place.

  • Pro

    Month Calendar Blog

    Archives by date

    A recipe blog's month as a grid of day buttons, one small square per post on each day, and a panel that lists the posts of the chosen day.

  • Pro

    Segmented Bar Recap Blog

    Post lists

    A product team's weekly recap as five numbered posts under one segmented bar whose segments are as long as each post's reading time; pointing at a row lights its segment.

  • Pro

    Email Digest Blog

    Subscribe and alerts

    A morning briefing shown as the email it is: drawn mail chrome, four summaries and an unsubscribe line, with a Switch that turns them into monospaced plain text.

  • Pro

    Trending Posts Blog

    Post lists

    Six ranked stories in two columns of three on shared hairlines, each with a huge outline numeral and its move since last week, as an arrow and a number.

  • Pro

    Cards Grid Blog

    Card grids

    The six latest posts of an engineering blog as cards on shared hairlines: drawn greyscale covers, a category, the title as the card's one link, a one-line dek and a byline with the date and reading time.

All 100 blog blocks