shadcn.io is not affiliated with official shadcn/ui
Social Media Post File Upload Block for Ark UI
A post composer with drawn picture tiles, a caption counted against the tightest of three channel limits, a schedule switch with a date and a preview card; Post waits until the caption fits.
Installation
Overview
Check a caption against every channel before it goes out, with this file upload panel for React with Ark UI. It is the composer of Postlark, a scheduler for small shops. A File Upload drop zone holds up to four picture tiles, which are drawn stand-ins: the same file name always draws the same picture. Under it a Textarea takes the caption, and a multiple Toggle Group picks the channels, Short post at 280 characters, Photo post at 2,200 and Article post at 3,000. The counter shows the caption against the tightest limit among the channels chosen and the line beside it names the ones it is too long for. A Switch schedules the post for a date. A preview card with an initials Avatar, the first picture and the caption sits beside the form, and under it on a phone. The one Shine Button is Schedule post, or Post now with the switch off, and it waits until a channel is chosen and the caption fits. The panel is ruled by Guides. It is built from File Upload, Textarea, Toggle Group, Switch, Input, Avatar, Shine Button and Guides, with a CSS entrance only. For social tools, shop dashboards and any composer with limits that differ by destination.
FAQ
How is the limit chosen?
Each channel has a typed character limit. The counter uses the smallest limit among the channels that are on, so with Short post and Photo post on it counts against 280. Turn Short post off and it counts against 2,200. With no channel on it shows a dash and asks you to choose one.
What happens when the caption is too long?
The line beside the counter names the channels it is too long for, with a mark, and the primary waits: its text stays readable, it is marked as unavailable, and pressing it repeats the reason in the status line instead of doing nothing. Shorten the caption or drop that channel and it is available again.
Are the pictures my files?
No. A picked file is never read: it is listed by name and drawn as a stand-in of three to five shapes chosen from the name, so the same name always draws the same picture. The preview shows the first one. Files over 50 MB or that are not pictures or video are refused with a message.
How does scheduling work?
The switch turns the date on and off. The date is an Input of type date that cannot go earlier than the fixed day the demo treats as today, 9 October 2026, and the preview and the button follow it. Nothing is scheduled; the status line says so.