Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Navbar blocks

Pro

Composer Ring Social Platform Navbar Block for Svelte

A navbar for a neighbourhood network: four links with an unread count, a profile avatar and a Create post button that opens a composer with a 280-character ring and a Post button that disables over the limit.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A navbar for a social network in Svelte with Ark UI. The wordmark of Nestwork, a neighbourhood network, leads; Feed, Explore, Groups and Messages follow (Messages carries a count of three unread), the current page marked by a foreground stroke on the bar's bottom edge; a profile avatar and a Create post button close the row. The button opens a composer: a popover from the md breakpoint, a drawer from the bottom below it. The composer is a text area with a character ring that fills as you write toward 280. With 20 characters remaining a warning icon and the count appear beside the ring, and the Post button is disabled while the post is empty or over the limit. Posting clears the field and says "Posted to Maple Court."; nothing is sent, the draft and the confirmation live in this page. It's built from Popover, Drawer, Textarea, Circular Progress, Badge, Avatar, Sheet, Shine Button and Guides. For community and social products with a quick post in the page's chrome.

FAQ

How does the character count work, and what does a screen reader hear?

The ring is Circular Progress in the foreground tone, filled to the share of 280 used; it is decoration. Below 20 characters remaining the warning icon (the only coloured part, on the icon, never on text) and the number appear beside it, in a space reserved for them. A hidden status region speaks only at the thresholds: "20 characters remaining", "10 characters remaining", "Limit reached" and "Over the limit", so it never reads out every keystroke.

What happens over the limit?

You can keep typing: the ring stays full, the count goes negative, and the Post button is disabled (and a submit does nothing) until the post is 280 characters or fewer. An empty or blank post can't be posted either. Change LIMIT and WARN_AT at the top of the file for other numbers; the spoken stages are in warning.

Does Post send anything?

No. It clears the field and shows "Posted to Maple Court." in a polite status; typing again removes it. To send a post, call your API from post and clear the field when it answers. A draft you close the composer on is kept, and opens again with the field focused.

How does the composer work with a keyboard?

Enter or Space on Create post opens the popover and focuses the field; Tab moves to Post; Escape closes it and returns focus to the button. It isn't modal, so the rest of the bar stays reachable.

How does it work on a phone?

Below md Create post becomes an icon button that opens the same composer as a drawer from the bottom (swipe it down or press Escape to close); below sm the avatar goes; below lg a menu button opens a sheet from the top with the four links and the unread count.

All 100 navbar blocks