shadcn.io is not affiliated with official shadcn/ui
Favorites Gallery Block for React Aria
Eight drawn prints, each in its own frame with a heart toggle, and a Favourites only switch with a count, a Clear favourites button and an empty state.
Installation
Overview
A gallery of favourites for React with React Aria, for Wallmark, a print shop. A start-aligned header carries a "Favourites only" switch at its end with a count ("3 favourites"), over eight drawn prints, each in its own frame with + marks that overshoot its corners. Every print has a heart toggle on its corner: pressed, the heart is filled in your text colour. Turning the switch on keeps only the hearted prints, a polite line says "Showing 3 of 8 prints", "Clear favourites" takes every heart back, and no hearts with the switch on shows an empty state. The hearts live in the page only and nothing is saved; the demo starts with three. An unseen copy of all eight holds the block's height. On a phone the prints are two across. It's built from Toggle, Switch, Button, Empty and Guides. The shop and its prints are made up for the example.
FAQ
Where are the favourites kept?
In the block's own state, so they reset when the page reloads. To keep them, store the list of ids (hearts) where you like (local storage, your account) and read it back as the initial state. The heart is a Toggle whose pressed state is the id being in that list.
What does Favourites only do?
It filters the prints to the hearted ones, in the shop's order. With it on, taking a heart back removes the print from the view, so focus moves to the count line. With it on and no hearts, an empty state says so and offers a button that turns the switch off.
Why doesn't the page jump when the pictures change?
An unseen copy of all eight pictures (hidden from assistive technology and from the keyboard) sits in the same grid cell as the live set, so the block is always as tall as the full gallery and the shown pictures stay at the top. Nothing below the block moves.
How does it work with a keyboard?
Every heart is a toggle button named "Favourite: <print>" with its pressed state, and the switch is a labelled switch; Space or Enter flips either. "Clear favourites" is a button and keeps its place (hidden but not removed) when there are none.
How do I use my own photographs?
Each picture is typed data with a description (its alt text), a scene and a ratio. Add your image's address to it, then replace the Scene in its tile with <img alt="" className="size-full object-cover" src={…} />: the caption already names the picture, and the role="img" wrapper's label can move to the alt. The comment above Scene says where. Tiles crop to a fixed shape, so keep object-cover.
How are the pictures drawn?
Each one is a scene: a kind (a room, a lamp, a bridge, a pattern…) and three numbers, light, horizon and a seed that moves ridgelines, lights windows and turns tiles. Each kind is a function that returns the picture as SVG paths painted with a few inks mixed from your theme's colours, so two pictures of one kind with different numbers differ. Nothing is random at render time: the server and the browser draw the same picture.