shadcn.io is not affiliated with official shadcn/ui
No Shared Items Empty State Block for React
A document tool's share dialog shown open over a drawn page: three access cards beside a padlock that is shut, ajar or open, a people field with a pick list of five teammates, avatar chips, and a Share with 2 people button.
Installation
Overview
Make sharing the first thing to do with a document, with this no shared items empty state for React with Base UI. A host panel names the document, Q4 plan, says who can open it ("Only you can open it.") and holds the real Share button, over a stage that draws the page: a title, a row of dashed avatar places, lines of text, a table and a figure. On load the share Dialog is drawn open in place over the page, so the block reads as a share dialog and not a blank page. It has three access cards, Only invited, Anyone in the workspace and Anyone with the link, beside a drawn padlock that is shut, ajar or open to match, and a people field with a Listbox of five teammates under it: choosing one adds an avatar chip. The Shine Button, the only colored control, says what it will do, "Share with 2 people". Sharing closes the dialog and the page behind follows: its avatars fill and its padlock changes. The frame is ruled by Guides, the padlock is one SVG whose classes change, and the transitions are CSS only. For the share step of any document, file or workspace product.
FAQ
Which part is only for the preview?
Shown open in place for the preview: on load the dialog is drawn in place, a native non-modal dialog over a drawing of the page, so nothing is trapped or focused. Share opens the real Dialog, with its focus trap, Escape and focus return to the button, and the in-place copy stays closed until a reload. Both share the same fields and state. In your app keep the Dialog and drop the in-place copy, the scrim and the Escape listener on the stage.
What stays in the page, and how do I make it real?
Who the plan is shared with, and how, live in the page's state: reload and the plan is private again. Nothing is sent, saved or emailed, and the words say so. The five teammates are typed in the file. To wire it for real, search your own directory for the pick list, post the access level and the chosen ids to your API where the code says so, and send the invitations from the server.
How do the access cards and the padlock work?
The three cards are native radio buttons in a radio group, so the arrow keys move between them and the choice is spoken. The padlock is decoration that follows the choice: the shackle sits in the body for Only invited, lifts for the workspace and swings clear for the link, and the line under the document's name in the host says the same in words once you share. Sharing with nobody is refused while Only invited is chosen, with a line that says so.
How does the people field work?
Typing narrows the pick list by name or address, ignoring case and accents. Down arrow moves into the list, Enter in the field picks the top match, and choosing a person adds an avatar chip and puts focus back in the field; each chip has its own Remove button. People already added leave the list, and it says so when nobody is left. The list is inline in the dialog, not a popup, so it works inside a modal on every library.
Is it usable with a keyboard and a screen reader?
The dialog is labelled and described, Escape and Cancel close it and return focus to Share, and the page behind is a drawing, hidden from assistive technology. One polite status line says each change, inside the dialog while it is up and on the page once it is closed.
How does it look on a phone?
The dialog docks to the foot of the stage as a sheet with a rounded top, its body scrolls and its actions stay put, so the Share button is always on screen. The hints under the cards are read by screen readers but dropped from view to make room. Nothing scrolls sideways at 320 px.
Related
- Pro
Invite Members Dialog
Share and inviteA household calendar's Members page with its invite dialog shown open: one email field that knows the household's domain, so an outside address joins as a guest, the people who already have access, and a Send invite button that adds a pending row.
- Pro
No Guests Empty State
Team and accessA collaboration tool's empty guest list: a pass to fill in (email, how long it lasts, view or comment), a visitor badge on a lanyard that fills as you type, a summary that rewrites itself, and a guest list of three dashed places.
- Pro
Invite Team Empty State
First runA full-height invite page for a team chat app: a drawn round table with five chairs that fill as email chips are added, a role select with a sentence per role, and one button that counts the invites and lists them.
- Pro
No Attachments Empty State
Files and docsA task's empty attachments popover shown open in place: a drawn paperclip holding a dashed sheet, Attachment rows that are dashed while there is room and done per file, and one Attach files button.
- Pro
No Documents Empty State
Files and docsA docs editor's empty library as a whole page: three document types as choice cards with drawn mini pages, one button that names the choice, and a quiet strip to drop a file instead.
- Pro
No Files Empty State
Files and docsA file manager's empty All files page in a framed window: the catalog sidebar with its counts, a large dashed drop zone with a drawn filing drawer, and a table that lists the files you choose or drop.