Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar blocks

Pro

Social Media Planner Calendar Block for Ark UI

A post queue per platform that fills best-time slots in order, with Move earlier and Move later buttons that re-time the posts, published reach and replies, and a drawn preview of the chosen post.

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

Queue posts against the times that work best with this social media planner for React with Ark UI. Tabs switch between LinkedIn, Bluesky and Mastodon, each named in text beside a neutral two-letter tile. A platform's queued posts take its typed best-time slots in order, Wednesday to Friday, so the time on each row comes from its place in the queue, not from the post. The Move earlier and Move later Buttons swap a post with its neighbour and the times follow, announced as "Moved Lunchtime tip to Thu 15 Oct, 12:15". Posts already published sit above the queue with their reach and replies. Choosing a post draws a preview card at the end of the frame in the platform's own avatar shape, with its character count against the platform's limit. Nothing is a screenshot, and the preview uses no photo. The bands are ruled by Guides, and on a phone the preview stacks under the queue. For social teams and tools that publish on a schedule.

FAQ

How do I add platforms, posts and slots?

Edit PLATFORMS (the name, the two-letter tile and the character limit), POSTS for the queue, SENT for published posts with their typed reach and replies, and SPOTS for each platform's slots in time order. The first queued post gets the first slot, and so on; add as many slots as posts.

How do the times re-assign when I move a post?

The time is never stored on the post. spotAt returns the platform's slot for a post's index in its queue, so swapping two posts swaps their slots without any other bookkeeping. The status line reads the new time back.

Why are LinkedIn, Bluesky and Mastodon only text?

They are real services, so the block names them in words with a neutral two-letter tile and never draws a logo or a brand color. The preview is drawn in the block's own shapes, one per platform, and says it is not a screenshot.

Are the reach and reply numbers real?

No. They are typed example values for posts that did not exist, shown so you can see where engagement goes once you connect your own data.

Is there a keyboard route for re-ordering?

Yes, it is the only route: each row has two named buttons, so nothing depends on dragging. The buttons at the ends of the queue say they can't move further in the status line instead of failing silently.

What stays local, and how do I wire it up?

Everything. The queue order lives in the page and resets on reload, and nothing is posted. To make it real, save the new order from move and publish with each platform's own API at the time spotAt gives.

All 100 calendar blocks