shadcn.io is not affiliated with official shadcn/ui
No Projects Empty State Block for Vue
A projects table with nothing in it yet: a dashed, editable first row where you type a name and press Enter, three drawn ghost rows fading into the card, and a message band with one Create project button.
Installation
Overview
Show an empty list as the list it is about to become, with this no projects empty state for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a real table-shaped list for Brackenboard, a project tracker: columns for the name, the status and the date it was updated. Its first body row is dashed and live: an Input in a Field takes a name, and Enter or the row's Add button turns it into a real row with a Planning Badge and a date. Under it three drawn ghost rows fade into the card, each giving its place to a project as one is added, so the table keeps its height. A message band closes the frame with the count's meaning in words and the Shine Button, the only colored control: Create project takes you to the dashed row, and once there is a project it reads Add another. The frame's bands are ruled by Guides, and the whole block uses CSS transitions only. For the empty state of any list that a visitor creates rows in.
FAQ
What happens when I add a project, and what stays in the page?
The name goes into the page's state and a row appears in the table with the status Planning and the date of the page's fixed "today" (9 Oct). Nothing is saved or sent: reload and the table is empty again, and Start over empties it without a reload. To wire it for real, send the trimmed name to your API where the code says so, add the row from the response, and show a failure in the status line under the table.
Why does the table never change height?
The body always has four rows: the dashed one, the real projects and as many ghost rows as are left to make four in all. Every row is the same height, so adding a project swaps a ghost for a real row in place. That is also why the demo lists at most three projects; with more rows of your own, let the list grow like any list and keep the ghosts for the empty state only.
How do I show this only when the list is empty?
Render it when your projects array has no items and render the table otherwise: the real rows, the dashed row and the ghost rows are three separate pieces of markup, and the ghosts are decoration that you can drop as soon as the list has content. The message band is the catalog's Empty, with the heading as a real h3 inside its title.
Is it usable with a keyboard and a screen reader?
Tab reaches the name field, Add, Create project and Start over, which stays quiet (and says so if pressed) until there is a project. Create project moves focus to the name field. The ghost rows are hidden from assistive technology and the dashed row's status and date shapes are decoration, so a screen reader hears a table of the real projects and a field named Project name. The sentence in the message band is a polite status region: it says what changed ("Added Autumn launch in this demo") without moving focus.