shadcn.io is not affiliated with official shadcn/ui
No Favorites Empty State Block for Vue
A full-height favorites screen for a curation app: four sample cards each with a heart toggle, an All or Favorites filter with a count, a shelf of four slots that fills in the order you add, and a drawn heart over a shelf.
Installation
Overview
Show what a favorites page will do before anything is kept, with this no favorites empty state for Vue with Ark UI. It's the favorites page of Keepsakely, a curation app: 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. In the band a greyscale drawing of a dashed heart over a shelf stands where a product's mark would, then "No favorites yet", one sentence and the Shine Button, the only colored control, Favorite the first item. Under it a shelf of four slots fills with the names of what you favorite, in the order you add them, and a Toggle Group switches the four sample cards between All and Favorites, with a count beside it. Each card has a heart Toggle. The first favorite turns the heart solid and changes the heading. The band is ruled by Guides, and everything moves with CSS only. For the favorites, wishlist or saved page of any app.
FAQ
What stays in the page, and how do I make it real?
Nothing is saved. The four cards are typed in the file, the favorites are a list of ids kept in the page's state, and a reload empties it. To wire it for real, save each heart press with your API where the code says so, load the saved ids when the page opens, and render the cards from your own items.
What does Favorite the first item do?
It favorites the first card that is not a favorite yet, so each press adds the next one. When all four are, it says "All four are favorites. Unfavorite one first." and changes nothing. Pressing a heart does the same for that card, and pressing it again takes it off the shelf.
What does the Favorites filter do to the cards?
It hides the cards that are not favorites without moving the others, so the list never changes height; hidden cards are unseen and inert, out of the tab order. With no favorites the area says "Nothing here yet. Press a heart in All." The filter is a single choice that can't be left empty, and the count beside it reads "2 favorites".
Does the page move when a favorite is added?
No. The heading and the sentence are held at the taller of their two versions, the shelf has four fixed slots, the cards are a fixed size and the count has a reserved width, so the button and the rows stay where they are. The heart in the drawing is one svg with a dashed layer that fades out while a solid one fades in.
Is it usable with a keyboard and a screen reader?
Each heart is a toggle button named "Favorite Oak desk lamp" with its pressed state, the filter is a labelled group with arrow keys, and the shelf is a list whose empty slots read "Empty slot". One polite status message says what changed and how many favorites there are. The drawing is hidden from assistive technology.