shadcn.io is not affiliated with official shadcn/ui
No Documents Empty State Block for React
A 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.
Installation
Overview
Turn an empty documents library into the first document, with this no documents empty state for React with Base UI. A whole screen, drawn with the page's rails and one band across it, holds the choice for Foliobox, a docs editor: a Document, a Spreadsheet and a Presentation, each a card with a drawn mini page (lines of text, a grid, two slides) whose first part, a title, a cell or a slide, is only dashed because nothing is made yet. The cards are one group of native radio buttons, and the Shine Button, the only colored control, names the choice: New spreadsheet. Pressing it makes the first document of that type and the mini page turns solid. Under the cards a quiet File Upload strip is the second way in: drop a file, or press the strip to choose one, and its extension picks the card it is listed on. The frame is ruled by Guides, and everything moves with CSS transitions only. For the empty library of any editor with more than one kind of document.
FAQ
What stays in the page, and how do I make it real?
Each type holds one document in the page's state: reload and nothing is made, and Start over clears them without a reload. A picked or dropped file is named on its card and never opened, read or sent, so nothing leaves the tab. To wire it for real, create the document with your API where the code says so and open it in your editor, and hand a dropped file to your storage where the strip's handler says so.
How does the choice work?
The three cards are real radio buttons with the card as their label, so the arrow keys move between them and the button's label follows the choice: New document, New spreadsheet, New presentation. A type that has its document is marked Created and can't be chosen again in this demo; the next free one is preselected, and with all three made the button says so and stays in the tab order.
What does dropping a file do?
The strip reads only the file's name. A word, text or notes file (docx, md, txt and a few more) is listed as a Document, a table file (xlsx, csv and a few more) as a Spreadsheet and a slides file (pptx, key and a few more) as a Presentation, and the card shows the file's name. Anything else, such as a picture, is turned down with a line that says so, and more than one file at once is too. Edit the extension lists at the top of the file to match what your editor opens.
Is it usable with a keyboard and a screen reader?
Tab reaches the cards as one group (the arrow keys move inside it), then the button, Start over and the drop strip, which opens the file picker on Enter or Space. The drawings are hidden from assistive technology because the names and lines say the same, and the one polite status line says what was made or why a file was turned down.
How does it look on a phone?
The three cards become rows with the mini page at the start and the name and line beside it, so the button is on the first screen. The strip and the status line follow, and the page never scrolls sideways, even at 320 px wide.
Does anything change the page's height?
No. The cards keep their size when a document is made, the badge and the title sit inside them, the button's label has room for its longest wording and the status line reserves two lines, so the page stays centred and nothing moves when you make a document or drop a file.
Related
- Pro
No Uploads Empty State
Files and docsA transfer tool's uploads page as a whole screen: one big dashed drop zone with a drawn letterbox, the rules shown and enforced, and two lists, the files added and the files turned down with their reasons.
- 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.
- Pro
First Project Empty State
First runA full-height first-run screen for a weekly planner: a name field and one Create project button at the start, and at the end a drawn drafting table whose blank sheet is only dashed until the project exists.
- Pro
No Folders Empty State
Files and docsA file organiser's empty folder view: a breadcrumb with an Up button, a shelf of four slots that fill with folders you name, each one opening onto its own empty folder, and a drawn stack of three folders with the top one dashed.
- 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 History Empty State
Files and docsA doc editor's History sheet drawn open at the end of a drawn page before any edit is kept: an isometric tray with a dashed card, and a Try an edit button that adds typed versions, each with an Undo.