shadcn.io is not affiliated with official shadcn/ui
No Pages Empty State Block for React Aria
A wiki's empty Pages screen in a framed window: the catalog sidebar with a dashed No pages yet, a title field and Create page that add a page to the rail and show its outline, and a drawn open book.
Installation
Overview
Show an empty knowledge base as the app it is about to become, with this no pages empty state for React with React Aria. A hairline frame with a plus mark on each corner holds a window of fixed height for Leafbook, a knowledge base: the catalog Sidebar with a Pages group that holds a dashed "No pages yet", which collapses to an icon rail with tooltips and is a sheet on a phone, and a page with a top bar and the Shine Button, the only colored control, Create page. Under the top bar a band holds a title Input that falls back to Untitled and a Start over, and below it the page area draws an open book whose right page is only dashed. Creating a page adds it to the rail, makes it the current page and shows its outline, four typed headings, in place of the book; pressing a page in the rail shows that page. The frame is ruled by Guides, and everything moves with CSS only. For the empty page of any docs, notes or wiki app.
FAQ
What stays in the page, and how do I make it real?
Nothing is saved. The pages are kept in the page's state, each new one gets the next typed outline (Overview, Goals, Open questions, Next steps, then two more sets), and a reload empties the list. To wire it for real, create the page with your API where the code says so, link the rail to your routes, and render the outline from the page's own headings.
How many pages can I make?
Three. The window has a fixed height and only the page area scrolls, so the demo holds three pages to keep the rail inside its box; past that Create page says so and moves focus to Start over. In your app the rail scrolls and takes as many as you have.
Does the window change size when a page is created?
No. The window is fixed in height, the book and the outline sit in the same scrolling area, and the dashed placeholder in the rail gives way to the first link. The top bar's heading follows the current page, and a status foot says what happened.
Is it usable with a keyboard and a screen reader?
Tab runs through the sidebar, the top bar's Create page, the title field and Start over, then the page. Enter in the title field creates the page too. Each rail link is named with its page and its place ("Untitled, page 1 of 2"), the current one has aria-current, and after creating, focus moves to the new page's title.