shadcn.io is not affiliated with official shadcn/ui
Social Media Sidebar Block for Svelte
A social network in a fixed-height window: Home, Explore, Notifications, Messages, Drafts and Scheduled with counts, and a New post dialog with a 280-character count that saves a draft or schedules a post.
Installation
Overview
Put the one action a social app is for in its top bar with this social media sidebar for Svelte with Ark UI. A window framed by a hairline with a plus mark on each corner holds the Sidebar: Home, Explore, Notifications and Messages under Browse, and Drafts and Scheduled under Yours, each with a count worked out from its list. The top bar's New post, a Shine Button and the only filled control, opens a Dialog with a Textarea that counts down from 280 characters, a choice between saving a draft and scheduling for 09:00 tomorrow, and a Save that names what it does. The post goes into Drafts or Scheduled, the count in the rail rises, the page shows that list and the status line says "Saved as a draft in this demo, nothing was posted." The page is the open view's feed in typed text, with an Empty state for a list with nothing in it. Folded to icons the rail keeps the six icons with tooltips; below the medium breakpoint it is a sheet. For social networks, community apps, forums and any app with a create action and a feed.
FAQ
How does the composer work?
New post opens a modal dialog and focus moves into it. The count under it is 280 minus what you have typed; it passes zero into negatives and the Save then says so in words ("12 over the limit of 280.") and puts focus back on the field instead of saving. An empty post is refused the same way. The form is its own component with its own state, so closing the dialog and opening it again starts clean. Escape or Cancel closes it and focus goes back to New post.
What are Draft and Schedule?
Two choices for where the post goes, made with a pair of radio buttons. Save as a draft puts it first in Drafts; Schedule puts it first in Scheduled with the note "Scheduled for 15 Oct, 09:00". Either way the rail's count rises, the page switches to that list so you see the post, and the status line says nothing was posted. The two lists start with one draft and nothing scheduled, so Scheduled shows its empty state until you schedule something.
Where do the counts come from?
From the lists. Notifications and Messages count the items in their typed lists, Drafts and Scheduled count the visitor's posts, and Home and Explore show no badge. A view with nothing in it shows no badge at all, and every count is in its link's accessible name ("Drafts, 2").
What stays in the page, and how do I connect it?
Everything: the feeds are typed in this file, a new post is added to the block's own state and nothing is posted, sent or saved, so reloading starts over. Replace the save handler with a call to your API and keep the dialog. The views are links to # whose handler shows the view instead of navigating. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button opens from the start edge, the right in a right-to-left layout, and New post stays in the top bar; the dialog is sized to the screen. Choosing a view closes the sheet and focus goes back to the menu button. The page shows the list's item count and the status line says what changed, so the first screen shows the result.
Is it accessible?
The sidebar is a navigation landmark named after the product, with each group named by its label and the open view marked as the current page. The dialog has a title and a description, its text field a visible label and its count, and its two choices are a labelled group of radio buttons. One polite status line reports every change, and the names, counts and times are isolated so they read right in a right-to-left layout.