shadcn.io is not affiliated with official shadcn/ui
No Templates Empty State Block for React Aria
A full-height page for a planning tool with no templates yet: four drawn layouts as a choice group, a large drawn preview of the chosen one, and a strip of four slots that fills as templates are added.
Installation
Overview
Let a new account see a layout before it commits to one, with this no templates empty state for React with React Aria. It's the templates page of Blankmoor, a planning tool: the page's two side rails run its full height and one band crosses the screen between two rules with a plus mark where each meets a rail, split in two. At the start sit the heading, one sentence and four layouts as a group of real radio buttons, each a card with a drawn thumbnail (a planner, a brief, a roadmap, a checklist). Under them the Shine Button, the only colored control, is named for the layout chosen ("Use the roadmap template"), and a strip of four slots for Your templates waits with the next free slot dashed. At the end of the band a large greyscale drawing of the chosen layout is previewed with a line on what it is for. Adding a template puts its thumbnail in the next slot and says it was added in this demo. It's built from Button, Shine Button and Guides, with CSS transitions only. For the templates, starters or layouts page of any planning, docs or design app.
FAQ
What happens when I press the button, and what stays in the page?
Nothing is saved. The layout goes into the page's state, its thumbnail fills the next slot of the strip, and a polite status message says "Roadmap added to your templates in this demo." Reload and the strip is empty again; Start over empties it without a reload. To wire it for real, copy the layout into the account where the code says so, then open it for editing; a layout already added is refused with a sentence rather than duplicated.
How does the preview change without the page moving?
All four previews are always in the page, stacked in one grid cell, and only the chosen one is visible; the others are hidden from sight and from assistive technology. The sentence under the preview reserves two lines (three on a phone), so a long description never moves the button. The drawings are decorative: the choice group, the heading over the preview and the status message carry the same facts.
Why are the layouts plain radio buttons?
A group of cards that choose one of four is what a radio group is, and the browser already does it right: arrow keys move the choice, one tab stop for the group, a name for every card. Each card is a label around a hidden radio, so the whole card is the click target and a focus ring shows on the card. React Aria's own radio group would work too, but native radios need no per-base code, so every base uses them.
Is it usable with a keyboard and a screen reader?
Tab reaches the layouts as one group (arrow keys change the choice), then the button and Start over, which stays quiet (and says so if pressed) until something is added. The group is named by its heading, the strip is a list that names each slot and what is in it, and the status message announces every change.
How does it look on a phone?
The four thumbnails become a row that scrolls sideways with snapping, so the heading, the layouts and the button fit the first screen. The preview follows below them, with its own top rule, at 240 px tall. From the large breakpoint the preview sits at the end of the band beside the controls, divided by a rule that meets the band's rules at plus marks.