Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Social Media Scheduler Chat Block for Svelte

A post scheduler's thread whose composer is fields: one post, three fictional networks with their own character limits and live counts, four typed time slots, a Schedule button, a confirmation card in the log and a Queue pane with Remove.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Schedule a post in conversation, with this social media scheduler chat for Svelte with Ark UI. A hairline frame holds a window of fixed height for Postcrane, a social post scheduler: its helper, Postcrane Bot, sits beside a composer made of fields. You write one post in a Textarea, press the networks it should go to in a Toggle Group where each shows its live count as 67 remaining or over by 12, and choose one of four typed time slots in a Native Select. Schedule, the one Shine Button, queues the post: a network the post is too long for is skipped and named, never blocked. The bot answers with a card in the log, and the post joins the Queue pane at the end, where Remove takes it out. On a phone a Chat and Queue switch shows one pane at a time.

FAQ

What stays in the page, and how do I make it real?

Everything. The networks, the limits, the four time slots, the bot's confirmation and the queue are typed or live in state, counted from a fixed Monday rather than the clock. Nothing is posted, no best-time advice is given and no model runs. To wire it for real, send the entry from schedule to your scheduler and replace NETWORKS and SLOTS_TEXT with your accounts and your free slots.

How are the character limits handled?

Each network shows how many characters remain, counting letters as a reader would, and the word over by when the post is too long, with a warning glyph beside the check glyph. Scheduling queues the post only on the chosen networks it fits and names the others in the confirmation. If none fits, a message under the fields says so and nothing is queued.

What does the Queue do?

It lists every post you scheduled that you have not removed, each with its slot, its first lines and the networks. Remove takes a post out and moves focus to the pane heading; its card in the log then reads Removed from the queue instead of disappearing.

Is it usable with a keyboard and a screen reader?

The log is a focusable region announced as a log, every message starts with a hidden name and time, and the networks are toggle buttons whose names include the count. A problem under the fields is an alert, the result of each action is in the status line, and the lettermarks are hidden because the network name is always in text.

How does it look on a phone?

Below the medium breakpoint the Queue pane hides and a Chat and Queue switch under the top bar shows one at a time, with the live count on the second. The three network cells stay side by side, and the window keeps its height while only the log and the queue scroll.