shadcn.io is not affiliated with official shadcn/ui
Presence Avatars Navbar Block for Vue
A shared-document navbar with presence avatars and an editing count, and a Share popover holding the roster, a viewing switch and a link that copies.
Installation
Overview
A presence navbar for Vue with Ark UI, the bar of Weftdoc, a shared-documents app. The wordmark leads, the document's title follows, and a presence cell shows who is in the document as avatars, each with a dot (solid while editing, hollow while only viewing) and the number of people editing. Share, the Shine Button, opens a popover over the page: the whole roster with each person's name, the section they are in and whether they are editing or viewing; a switch that shows you as viewing instead of editing, which the dots and the count in the bar follow; and the document's link in a read-only field with a Copy button that copies it for real. The people are example data. On a phone the avatars collapse to one icon and the count, and Share to its icon. The block stays 56 pixels high, and the dividers meet the page's top rule with a plus. It's built from Avatar, Popover, Switch, Copy Button, Input Group, Status, Shine Button and Guides, with your theme's tokens for every colour. For documents, whiteboards and any tool whose header says who else is here.
FAQ
How do I put real people in the roster?
Replace PEOPLE at the top with your own list: initials, name, the section each person is in, and whether they are editing. The count, the dots, the roster rows and the polite line all read that list, so they can't disagree. The entry with self is the viewer, and it's the only one the switch changes. In a real product, feed the list from your presence channel.
Is presence shown by more than a dot?
Yes. The dot is solid for editing and hollow for viewing, but every roster row also says "Editing" or "Viewing" in words, and the bar reads "3 editing". The avatars in the bar are hidden from screen readers because that count and the roster say the same.
What do the switch and the Copy button do?
The switch changes your own row and the bar's count at once and a polite line says "You are shown as viewing. 2 editing." It doesn't send anything: it's state on this page. Copy puts the link on the clipboard and its label says "Link copied". The link uses a reserved example domain; replace LINK.
How does it work with a keyboard?
Share opens the popover with Enter or Space, and Escape closes it and returns focus to Share. Focus moves into the popover on open; Tab walks the switch, the link field and Copy.
How does it fit on a phone?
The wordmark shrinks to its icon and Share to its icon (the words stay for screen readers). The avatars collapse to a people icon and the number; the word "editing" stays for screen readers. The popover is as wide as the screen allows, less a margin. Nothing wraps and the bar is 56 pixels at every width.