shadcn.io is not affiliated with official shadcn/ui
Social Post Composer Command Menu Block for Ark UI
A social scheduler's command menu shown open as a composer beside its queue: pick networks, write once, watch a character counter per network, and schedule into the week's next free slot.
Installation
Overview
Write one post for several networks with this social post command menu for React with Ark UI. It opens from the queue in Feedmeadow, a social scheduler, whose header holds an outline field with its ⌘ K cap, and the week's queue is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The menu is a composer docked at the end: three networks with their own limits (Chirpnet 280 characters, Snapfeed 2,200 and Longform 3,000) as a multiple ToggleGroup with a lettermark tile each, one message field, and a counter per chosen network that reads "Chirpnet 212 of 280" or "Chirpnet over by 12". Enter schedules the post into the next free slot and the drawn week shows it land; Shift Enter writes a new line, and Save draft keeps it unscheduled. Under the composer the catalog Command lists the drafts and the scheduled posts and searches them; choosing one loads it back. For preview the menu is drawn open in place when the page loads; the field, or Ctrl or ⌘ K while focus is in the block, opens the real command dialog with the same posts, message and query. For schedulers, publishing tools and any form where one text has several limits.
FAQ
Why is the menu already open, and what do I keep?
So you can see it without a click. On load the menu is the composer and the Command drawn inline over a picture of the queue, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so the message written in the copy is in the dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.
How do the per-network limits work?
Each chosen network counts the same trimmed text against its own limit, so one message can fit Snapfeed and Longform and still be over for Chirpnet. The counter says how many of the limit you have used, or "over by" and the number in words, and a post that is over a chosen network is not scheduled: the line under the counters names the networks and offers two ways out, shorten it or switch the network off. The counters and that line keep their height.
Where does a scheduled post go?
Into the next free slot of a typed list of five (Monday 19 October at 09:00 through Friday 23 at 10:45). It appears in the Scheduled group with its slot and networks, and in the drawn week behind the menu with its time as a time element. When all five are taken the line says the week is full instead of overwriting one. Nothing is posted.
What does choosing a draft or a scheduled post do?
It loads the text and the networks into the composer and takes the post off the list, so editing never leaves two copies. If the composer already holds text, nothing is replaced: the line asks you to save or schedule that first.
What stays local, and how do I wire it?
All of it. The posts, the slots and the limits are typed data and state in the block, and the status line says nothing is posted. In your app load START and SLOTS from your scheduler, send schedule to its API, and read each network's limit from its own documentation. The lettermark tiles are placeholders for logos you have the rights to use.
Is it accessible from the keyboard?
Yes. Tab moves through the networks, the message, the two buttons and the search field; Enter in the message schedules, Shift Enter adds a line, the arrow keys move through the posts, and Escape closes the menu with focus on the field. The switch always keeps one network on. Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a combobox and the first is highlighted when it opens.