shadcn.io is not affiliated with official shadcn/ui
No Posts Empty State Block for React Aria
A social feed's first post with a live preview: a field with a 0 / 280 counter, a card that mirrors the text as you type, a paper plane on a trail, and a feed of two places that the post lands in.
Installation
Overview
Start a feed as the first post it is about to hold, with this no posts empty state for React with React Aria. It is the first-post page of Finchpost, a social feed: the page's two side rails run its full height and one band crosses the screen between two rules with a plus mark where each meets a rail, split in two. At the start the heading, one sentence, a Textarea in a Field with a 0 / 280 counter, and the Shine Button, the only colored control, Post. At the end your feed: a card that mirrors the field as you type, with an Avatar of your initials and a Badge that says Draft preview, a drawn trail of dashes with a paper plane on it, and two places that are only dashed until something is posted. Posting sends the plane down the trail, which turns solid, clears the field and puts the post in the top place. The frame is ruled by Guides, and everything moves with CSS only. For the first screen of a social network, a team feed or any app where people post.
FAQ
What stays in the page, and how do I make it real?
The posts stay in the page's state and nothing is published or saved: the status line says so, a reload empties the feed and Start over empties it without one. To wire it for real, send the text to your API where the code says so, put the post from the response at the top of the feed, and let your server decide who sees it.
How does the preview work?
The card under Your feed shows what you type as you type it, cut to three lines, with your initials and a Draft preview badge; with an empty field it says where your words will show up. It reads the same state as the field, so it can never differ from what Post will list.
What does Post do, and what are the limits?
A post can be up to 280 characters; within 20 of the limit the line under the field says how many are to go. With an empty field the button stays quiet and pressing it says "Write something first" and keeps focus in the field. The demo feed holds two posts, so the feed always shows two places and the page never changes height; at two the field says so and Start over clears them.
Is it usable with a keyboard and a screen reader?
Tab reaches the field, Post and Start over, and after a post focus goes back to the field so you can write another. The preview is a named article, the feed is a named list of the real posts, the dashed places and the drawing are hidden from assistive technology, and one polite status line says what changed. Your text is shown with automatic direction, so a post in Arabic or Hebrew reads right.