shadcn.io is not affiliated with official shadcn/ui
No Notes Empty State Block for Solid
A notes app's empty wall in a framed window: the catalog sidebar with All notes and Pinned, a field and an Add note button that stick a note on the first of six dashed squares, a search that dims the notes that do not match.
Installation
Overview
Show an empty notes app as the wall it is about to become, with this no notes empty state for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Jotbarn, a notes app: the catalog Sidebar with All notes and Pinned and a count on each, 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: Add note. The page opens with a line that says what the wall is for, an Input for the text of a note (Enter or Add note sticks it up) and a search field that dims the notes that do not match. The wall is six dashed squares, each turned a little as if pinned up by hand; a note fills the first free square as a sticky with a folded corner, its date, a Pin button and a Remove button. Pinned lists only the pinned notes in the same squares, so the window never changes height. The frame's corners come from Guides, and the whole block uses CSS transitions only. For the first screen of any notes, memos or scratchpad app.
FAQ
What happens when I add a note, and what stays in the page?
The text goes into the page's state and a sticky appears in the first free square, dated with the page's fixed "today" (9 Oct). Nothing is saved or sent: reload and the wall is bare again, and Start over clears it without a reload. To wire it for real, send the trimmed text to your API where the code says so, add the note from the response, and show a failure in the status line at the foot of the window.
Why six squares, and why does the window never change height?
The wall is a fixed grid of six squares: a free one is a dashed outline and a used one is a sticky, so adding or removing a note swaps what is in a square and nothing else moves. The demo holds six notes and says so when you try a seventh. With your own data, let the wall grow and keep the dashed squares for the empty state only.
How does the search work?
It compares what you type with each note's text, ignoring case, and dims the notes that do not match (a solid tone and softer text, never a lower opacity) while the count beside the field reads "2 of 5". Dimming keeps every square where it is, so a filter never moves the wall. In your app you may hide the rest instead.
Is it usable with a keyboard and a screen reader?
Tab runs the sidebar, the top bar, the field, the search, Start over and the wall. Add note with an empty field says so and puts focus back in the field; Remove moves focus to the next note, or to the field when none is left. Each Pin button is named for its note and exposes whether it is pressed. The rail links carry their counts in their names, and the status line at the window's foot says every change.