shadcn.io is not affiliated with official shadcn/ui
Latest Posts Footer Block for Radix UI
A footer showing the latest post from three channels as cells that share their hairlines, each a drawn mark, a time, one sentence and a View post line, with a Follow row of counts, then the wordmark and one row of links.
Installation
Overview
A latest-posts footer for React with Radix UI, for a product that posts in several places. A header holds the title and a Follow row: three made-up networks, each a name and a follower count. Under it, three cells from rail to rail share their hairlines, one per network, each a single link: a drawn greyscale mark, the network's name, how long ago it posted, the sentence it posted and a "View post" line. Below sit the wordmark and one row of links in a nav labelled Footer, and a legal band closes the page. On a phone the cells become cards you swipe sideways, snapping to each one. The networks, posts and counts are made up, and the block has no JavaScript of its own.
FAQ
How do I change the posts?
Edit the CHANNELS array: each has a name, a drawn glyph, the post sentence, how long ago it was posted and the followers count. The times are typed text, so update them when you refresh the posts or fill them from your scheduler on the server.
Why are the networks made up?
The block names no real platform, so there is no brand to misuse. The marks are neutral drawn paths in your text colour; replace the names and marks with your own networks, and keep a visible name next to every mark.
Are the follower counts live?
No, they are example figures set in the file. Fetch the real counts on the server if you want them live, and format them compactly (12.4K) so the cells keep their width.
How does the swipe row work on a phone?
From md the cells are a three-column grid. Below it the list becomes a horizontally scrolling row with scroll snapping, so each card lands in the middle. It scrolls with touch, the keyboard (each card is a link you can tab to) and the mouse wheel.