shadcn.io is not affiliated with official shadcn/ui
No Folders Empty State Block for Radix UI
A 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.
Installation
Overview
Show an empty folder as the first of many, with this no folders empty state for React with Radix UI. A hairline frame with a plus mark on each corner holds the folder view of Binderfly, a file organiser, in three bands. The first is a breadcrumb that starts at All files and grows with every folder you open, with an Up button at its end. The second is a shelf of four slots, dashed until a folder takes one. The third is the empty message: a drawn stack of three isometric folders with the top one dashed, a heading, a status line and the Shine Button, the only colored control. New folder opens a name field in the next slot: Enter or the button keeps it as a folder tile, Escape drops it. Pressing a tile opens that folder onto its own empty shelf, with its own New folder, and the stack's top folder turns solid as soon as the view holds one. The frame is ruled by Guides, the field is an Input in a Field, and the transitions are CSS only. For the empty tree of any app where people organise files.
FAQ
What stays in the page, and how do I make it real?
The folders live in the page's state: reload and the tree is empty, and Start over empties it without a reload. Nothing is saved or sent. To wire it for real, create the folder with your API where the code says so, add its tile from the response, and load a folder's children when it is opened instead of reading them from the list.
Why three levels and four folders to a level?
They are the demo's own limits, so the shelf can keep its size and the breadcrumb its single line. At the third level, and in a folder that holds four, New folder stays in the tab order and says why instead of doing nothing. The limits are the two constants at the top of the file; with your own data let the shelf grow and scroll.
How does naming a folder work?
The name field takes up to 20 characters. Enter keeps the folder, an empty name or a name that is already used in the folder is refused with a line that says so, and Escape drops the field and puts focus back on New folder. Pressing New folder again while the field is open keeps the name too, which is the same as Enter.
Is it usable with a keyboard and a screen reader?
The breadcrumb is a navigation landmark whose last step is the current page, Up and the breadcrumb steps go back, and every tile is a button named for its folder and what it holds, such as Open Design, 2 folders inside. Opening a folder moves focus to the message heading, which names the new place, and going back puts focus on the tile you came from. One polite status line says what changed.