shadcn.io is not affiliated with official shadcn/ui
No Drafts Empty State Block for Vue
A writing app's first-draft page: a field drawn as lined paper, a status that says Saved a moment after you stop typing, a dashed first row that becomes your draft in a list, and a pencil on a sheet that gets its first line written.
Installation
Overview
Turn a blank page into a draft that keeps itself, with this no drafts empty state for Vue with Ark UI. A whole screen holds the page's rails and one band across it, split in two. At the start are the heading, one sentence and a Textarea drawn as lined paper: type, and a moment after you stop a Status dot and the words Saved in this demo appear under it, with a word count. Under the field, the one Shine Button, Start writing, puts the cursor in the field, then reads Keep writing. Below that is the drafts list, with a dashed row where the first draft will go; when your text is kept the row becomes a real one with its first words, its length and the date. At the end a drawing of a sheet of lined paper with a pencil laid across it, whose dashed first line is written over as the draft is kept. On a phone the drawing sits above the copy. The page rails and band come from Guides, and the whole block uses CSS transitions only. For the empty drafts, unsent messages or unpublished posts of any writing tool.
FAQ
Is my draft really saved, and what stays in the page?
No. A moment after you stop typing (700 milliseconds) the text is copied into the page's state, the status reads Saved in this demo and the list shows the draft. Nothing is stored or sent: reload and everything is gone, and Start over clears it without a reload. To wire it for real, send the text to your API where the code says so, show Saving until the response arrives and a failure in the status line if it does not.
How does the Saved status work?
Under the field a line says Nothing written yet, then Saving while the text is newer than the kept copy, then Saved in this demo; a small dot beside it appears only for the last one. The polite status region speaks the result once, not on every key. Emptying the field takes the draft back out of the list and says so.
How is the lined paper made?
A repeating gradient on the field's background draws one hairline under every 32 pixels, the same as the line height, and it scrolls with the text. It is a plain textarea with a fixed height, so a long draft scrolls inside the field and the page does not grow.
Is it usable with a keyboard and a screen reader?
Tab reaches the field, Start writing and Start over, which stays quiet and says "Nothing to start over." until there is something to clear. Start writing moves focus into the field. The drawing and the dashed row are hidden from assistive technology; the list is a real list with the draft's first words, and the polite status line says what was kept.