shadcn.io is not affiliated with official shadcn/ui
Social Media Post AI Block for React
Write one idea for three channels: tabs for a short post, a professional post and a photo caption, each with its own character limit and counter, a tone group, six hashtag chips and a drawn post preview.
Installation
Overview
Plan a post for each channel from one idea, with this social media post planner for React with Base UI. A hairline frame with a plus mark on each corner holds Tabs for three channels, Short post at 280 characters, Professional post at 3,000 and Photo caption at 150. Each channel keeps its own text in a Textarea and counts it for real: a line reading "212 of 280", a Progress bar and a problem line that appears once the text is over. A tone group, Professional, Casual, Witty or Inspiring, loads one of twelve typed texts into the open channel and keeps the hashtags you chose; six hashtag chips add and remove real text, and are on whenever the text holds them. At the end a drawn post card shows the text as it would read, with initials for the avatar and a plain panel standing in for the photo. The Shine Button, the only colored control, copies the post and refuses text that is over the limit. Guides rule the bands. For schedulers, marketing tools and any editor with per-channel limits.
FAQ
What stays in the page, and how do I make it real?
Everything. The twelve texts, the brand and the preview are typed in the file, the counts are worked out as you type, and Copy writes to your clipboard. Nothing is posted and no model writes the texts. To make it real, load the texts from your own service in pickTone and send the copied text through the channel's API.
How are the limits counted?
By the length of the text in characters, including spaces and hashtags. Past the limit the bar stays full, a line says how many characters are over, and Copy post refuses until you cut the text. Channels with different limits would need their own counting rules, for example links that count as a fixed length, which you would add to overText.
How do the hashtag chips work?
A chip is on when its tag appears in the text. Turning one on adds it to the end; turning it off removes that word wherever it is. Because the state is the text, typing or deleting a tag by hand updates the chip as well.
What happens to my edits when I change the tone?
The open channel's text is replaced by the typed text for that tone, and the hashtags you had on are added back. Edits to the words are not kept, and the status line says which tone was loaded.