shadcn.io is not affiliated with official shadcn/ui
No Attachments Empty State Block for Vue
A task's empty attachments popover shown open in place: a drawn paperclip holding a dashed sheet, Attachment rows that are dashed while there is room and done per file, and one Attach files button.
Installation
Overview
Show a task's empty attachments as the popover it opens, with this no attachments empty state for Vue with Ark UI. The host is a task in Tackwick, a task tracker: its header holds the real Attachments button, a paperclip with the count, and under it a drawn task card shows a title, lines, a paperclip button and a small chip for each file attached. Drawn open in place under that paperclip is the popover card: a drawn paperclip holding a dashed sheet, a list of three Attachment rows, a dashed idle one while there is room and a done one per file with its name, its size and Remove, and the Shine Button, the only colored control, to attach files. The File Upload picks them and takes dropped ones, and the first file turns the sheet solid. Pressing the Attachments button opens the real non-modal Popover with the same content, so what you attached in place is there. The frame is ruled by Guides, and everything moves with CSS only. For the attachments of any task, ticket or card.
FAQ
What stays in the page, and how do I make it real?
The files stay in the tab: the card reads only each file's name, size and type, never its contents, so nothing is opened or uploaded, and a reload empties it. To wire it for real, upload each file where the code says so, keep its URL in the row, and show an upload failure in the row with the Attachment's error state.
What is the in-place card, and what is the real popover?
Shown open in place for the preview, so the block shows its content without a click: on load the card is drawn as a plain non-modal element under the paperclip on the stage. Pressing the Attachments button opens the real Popover, with Escape to close it and focus back on the button, and the in-place copy stays closed until a reload. In your app keep only the Popover and its trigger.
How many files can a task hold?
Three, in this demo, so the list can keep its height. Files past the third are turned down with a line that says how many did not fit, and Remove on a row makes room. With your own data let the list grow and scroll, and keep the idle row for the empty state only.
Is it usable with a keyboard and a screen reader?
The Attachments button is named with its count, such as Attachments, 2 files. Inside the card Tab reaches Remove on each row, named for its file, and Attach files, which opens the picker. The drawings are hidden from assistive technology, and one polite status line says what changed, such as Attached 2 files, 2 of 3.
How does it look on a phone?
The in-place card docks to the foot of the stage so the Attach files button is on the first screen. The real popover keeps the catalog's own phone layout, a card under the button that never runs past the screen's edge, and the page never scrolls sideways, even at 320 px wide.