shadcn.io is not affiliated with official shadcn/ui
Pinned Posts Blog Block for React Aria
Three pin slots in a tinted band above a list of posts: a pin toggle on each row fills the first empty slot, an empty slot reads Pin a post, and the band counts pinned posts.
Installation
Overview
A pin board for React with React Aria, written for Tackroom Notes, a horse-care club's journal. A tinted band holds three numbered slots above six posts. Every post row ends in a pin toggle (a pressed toggle is a pinned post): pinning fills the first empty slot with the post's title, a link, and unpinning clears its slot with the post's Unpin button or the toggle. An empty slot reads "Pin a post", the band counts "2 of 3 pinned", and with all three full the other rows' toggles are off until one is cleared. The pins live on the page only and are lost on reload, and nothing is sent anywhere. A phone stacks the three slots. It's built from Guides, Toggle and Button. For club journals, documentation hubs and blogs that let readers keep a few posts close.
FAQ
Where are the pins kept?
In one useState array of three slot values (a post id, or an empty string). The page starts with two pins. To keep them, store the array in localStorage or your account API and pass it in as the starting value.
Does a pinned post leave the list?
No. A pinned post keeps its row, with its toggle pressed, and its title also appears in a slot, so nothing in the list moves when you pin. Unpinning clears the slot. Keeping the rows in place is what keeps the layout steady.
What happens at three pins?
The band says "3 of 3 pinned" in a polite status line and a hint line asks you to unpin one first. The toggles of the unpinned rows are disabled until a slot is free; the pinned rows' toggles and each slot's Unpin button still work.
How does a screen reader hear a pin?
Each toggle is named "Pin: <title>" and reports pressed or not pressed, the count is a status region, and each slot is a list item numbered one to three that reads either the post's title (a link) or "Pin a post in slot 2".