Social media scheduler

A React block (a whole screen) in Beamline's Blocks category.

Plan posts across your social accounts: a week calendar where every post sits at its time in its account's colour and moves by drag, a queue of what goes out next with results for what already went, and a composer that writes once for several accounts, counts each one's character limit, previews the post as it will look and suggests the times your audience is around.

Use it for

Scheduling posts to several social accounts and seeing the plan as a calendar.
Any publishing queue with times, channels and per-channel limits (newsletters, push notifications).

Not for

Meetings and bookings (event-calendar on its own).
Writing long documents (rich-text-editor).
Reading replies and messages (team-chat).

Anatomy

header: title, Calendar or Queue, Share (who can see and edit the plan), New post
accounts: a chip per account with its post count; an expired connection says so with Reconnect
calendar: the week with each post at its time in its account's colour; drafts dashed; published posts fixed
queue: posts by day: time, accounts, the text, its picture, its state; published ones show reach, engagement and clicks
composer (a sheet): accounts to post to, the text with each account's characters left, a preview as the chosen account shows it, the date and time, suggested best times, Save draft and Schedule

Variants

0: room: the composer opens as a side sheet, full width on a phone; accounts fold into a scrolling row; on a phone the queue is the natural first view (defaultView)

States

loading (calendar and queue in their shapes)
nothing planned (New post)
draft, scheduled, publishing, published (with results), failed (the reason and Try again)
an account's connection expired (its posts won't go out until Reconnect)
over an account's character limit (the count turns and Schedule says which account)
a time in the past or on a published post is refused with the reason
result unknown (— not 0)

Keyboard

Tab: header, account chips, the calendar or the queue, the composer's fields
Calendar: the event calendar's keys (arrows between days, Space picks a post up, arrows move it, Enter opens it)
Queue: each post is a button that opens it in the composer
Composer: ⌘↵ schedules; Escape closes

Motion

A post dragged to a new time lands with the calendar's glide; counts on the account chips roll; characters left count down and turn when over; a scheduled post rises into the queue; a publishing post shows its spinner until it lands as published. Nothing moves at rest.

Props

Prop	Type	Default	Description
`channels` (required)	`SocialChannel[]`	—	{ id, name, network, handle, limit?, status: connected · expired, color?, icon?, avatar? }
`posts` (required)	`SocialPost[]`	—	{ id, text, channels: string[], at: number \| null, status: draft · scheduled · publishing · published · failed, image?, error?, results?: { reach, engagement, clicks } }
`view / defaultView / onViewChange`	`"calendar" \| "queue"`	—
`onSave`	`(post: SocialPostDraft) => void \| Promise<unknown>`	—	Create or update a post (draft or scheduled).
`onMove`	`(id: string, at: number) => void`	—	A post dragged to a new time.
`onDelete / onRetry`	`(id: string) => void`	—
`onReconnect`	`(channelId: string) => void`	—
`bestTimes`	`{ at: number; why: string }[]`	—	Suggested times, shown as chips in the composer.
`share`	`Omit<ShareDialogProps, "title" \| "trigger">`	—	When given, Share opens the share dialog for the plan.
`now`	`number`	—	The present (the browser's clock by default).
`loading`	`boolean`	—
`title`	`string`	`"Publishing"`
`className / classNames / style / ref`	`string / SocialSchedulerClassNames / CSSProperties / Ref<HTMLElement>`	—

Built from

Dependencies

lucide-react

Import

import { SocialScheduler } from "@/blocks/social-scheduler/social-scheduler";

Get it

Social media scheduler is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent