shadcn.io is not affiliated with official shadcn/ui
Shared Files Notification Block for React
Files shared with you in a table (name, owner, access) whose names open a drawn greyscale preview, with Request edit access that turns into Requested.
Installation
Overview
Show what teammates shared, and let people ask for more access, with this shared files notification for React with Base UI. A compact header sits over one hairline frame with a plus mark on each corner. A native table lists five files: the name with its size under it, the owner and your access in words. Hovering or focusing a name opens a Hover Card with a drawn greyscale preview of the page (slides, a document, a spreadsheet, a drawing or a brief, in plain bars and boxes), the owner and when it was last changed. A file you can edit has Open; one that is view only has Request edit access, which turns into Requested, and the line over the table says what happened. On a phone the owner folds under the name. It's built from a native table, Hover Card, Badge, Button, Avatar and Guides, with a CSS entrance only. For a file sharing tool, a design handoff or an inbox of shared documents.
FAQ
How do I fill it with my own files?
Edit FILES: each has an id, a name, a size (typed, as text), its owner, an ISO modified time, whether you can edit it and the kind of drawing its preview uses (deck, doc, sheet, design or brief). The counts in the line over the table, the badges and the preview cards are worked out from that list. To add a kind of preview, add a branch to Page and a case to FileIcon and kindWord.
What does Request edit access do, and what stays local?
It records the file's id in a list kept in the page, turns the button into a quiet Requested that stays focusable, and says "Requested edit access to autumn-campaign-deck.pdf from Teodora, in this demo. Nothing was sent." Open only says what it would open. Nothing is opened, downloaded or sent. To make it real, send the request from the request handler and mark the row from your server's answer.
How do the preview cards open?
Is the table accessible?
It is a native table with a caption, column headers and a row header for each file's name, and it can be scrolled and focused when it overflows. The name is a button named "Preview" and the file, the access is written out ("Can edit", "View only") and never only an icon, and each action names its file. The status line is a polite live region that is present from the start.
How does it look on a phone?
The Owner column is dropped and the owner's first name joins the size under the file's name. Access stays in its column with the badge over the button, and Request edit access shortens to Request (its name stays the full sentence).
Are the previews real thumbnails?
No. They are drawn in CSS from a few bars and boxes in greys that follow the theme, one drawing per kind of file, so nothing is loaded and nothing identifies a real document. In your app replace the drawing with a thumbnail your server produces and keep the text beside it.
Related
- Pro
Link Cell Table
Rich cellsA reading list whose titles are real links: an arrow and a name that says opens in a new tab on links to other sites, plain links inside the app, truncated hosts with the whole address in a title, and a preview card on hover or focus.
- Pro
A developer inbox as a table: a checkbox, a mono repository name, the title and a reason tag per row, a select-all that shows a mixed state, and bulk Mark done and Unsubscribe with an Undo.
- Pro
An archive of notifications as a table whose auto-delete column is worked out again when you pick a retention period, with a restore per row, an undo, and an alert dialog before it empties.
- 421Pro
Tabbed Inbox Notification
Bells and panelsA notification centre as a narrow panel: tabs for All, Mentions and Alerts with their own unread counts, rows you press to mark read, a mark all read for the open tab and a clear with an undo.
- Pro
Snooze Notification
Quiet and digestsA notification with a snooze popover: Later today, Tomorrow and Next week worked out from one fixed time, a custom hour, a Snoozed list with wake times and a Wake now that sends one back.
- Pro
An error tracker's grouped issues in a table: severity as a word and a glyph, event counts and dates, a status menu that updates the word and moves the issue, and an issue that opens to its stack in a numbered code window with a Copy for the event id.