shadcn.io is not affiliated with official shadcn/ui
Social Posts Timeline Block for React Aria
A content calendar on one rail around a Now line, with four scheduled posts above and five published posts with likes, replies and shares below, a Move to select that re-times a post and an Undo.
Installation
Overview
Plan what goes out next and see how the last posts did with this content calendar timeline for React with React Aria. It is written for Sendloft, a fictional post scheduler. A hairline frame with plus marks holds a summary cell at the start and one rail. The summary counts the queue, names the next post, totals the engagement of the last five posts and lists four channels as neutral two-letter tiles. The rail has a Now line at 14 Oct 2026, 10:00: scheduled posts above it with dashed nodes, published posts below with solid nodes and typed counts. Each scheduled post has a "Move to" Native Select with three times; choosing one re-times the post, the rail re-sorts, the status line says what moved and an Undo puts it back. The summary stacks above the rail on a phone. Times and counts are example data and nothing is sent.
FAQ
How do I change the posts?
Edit SCHEDULED and PUBLISHED at the top of the file. A scheduled post has a current time, a channel and the three times it can move to. Published posts carry their likes, replies and shares.
What stays in the page?
The times you chose and the last move, in local state. Nothing is published or saved. To wire it, call your scheduling API in move() and keep the Undo for the response.
What does Undo do?
It puts the last post you moved back at its earlier time and says so in the status line. Only the last move can be undone.
How is the Now line placed?
It is fixed against AS_OF, so scheduled posts are always above it. In your app compute the split from the current time after mount.