shadcn.io is not affiliated with official shadcn/ui
Tab Categories Gallery Block for Vue
A band of four tabs where each panel is a collection's own page: a large cover, its name, two lines about it, its picture count and four more pictures.
Installation
Overview
A gallery of curated collections for Vue with Ark UI, for Tablemark, a studio that brands restaurants. A start-aligned header sits over a band of four tabs ruled with + marks: Menus, Signage, Tableware and Booking. Each tab's panel is a page of its own, laid out differently on purpose: a large cover picture, the collection's name with "14 pictures", two lines about it, an outline button and a row of four more pictures that link on. Menus puts the cover at the start, Signage across the top, Tableware at the end and Booking a tall cover at the start. The pages differ in height, so an unseen copy of every page holds the block's height. On a phone the cover comes first and the four pictures are a snap row. The pictures are drawn, not photographed, in your theme's own greys. It's built from Tabs, Badge, Button and Guides. The studio and its work are made up for the example.
FAQ
How are the four pages laid out differently?
Each collection carries its layout as data: literal classes for where the cover, the copy and the row of four sit from the large breakpoint, so one Panel draws all four. Cover at the start, across the top, at the end, and a tall one at the start. The reading order never changes: the cover is first in the markup, then the copy, then the row.
Where does
A collection lists the pictures shown on its page (a cover and four more) and a count of the others in the library, elsewhere. The badge adds them up, and the status line says it too after each tab. The other nine are example data: this block doesn't draw them, and the "Open the collection" button and the pictures are links (href="#") for you to point at your pages.
Why doesn't the page jump when I change tab?
An unseen copy of all four pages (hidden from assistive technology and from the keyboard) sits in the same cell as the open page, so the block is always as tall as the tallest page and the tabs never move. Each page stretches to fill that height.
How does it work with a keyboard?
The tabs follow the usual pattern: Tab reaches the chosen tab, the arrow keys move between tabs (mirrored in a right-to-left layout), Home and End jump to the ends, and Tab again enters the page, where the button and the four pictures are links in reading order.
How does it fit on a phone?
The tab band scrolls sideways if it has to. In a page, the cover comes first, then the name, the copy and the button, and the four more pictures become a snap row you swipe, with the next picture peeking.
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.