Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Gallery blocks

Pro

Expandable Tile Grid Gallery Block for Vue

Twelve drawn potted plants on shared hairlines where choosing one grows its tile to two cells wide and two tall while the others flow around it, one open at a time, with Escape or a button to put it back and a grid that never changes height.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A grow-in-place grid for Vue with Ark UI. A start-aligned header sits over twelve drawn potted plants (a snake plant, a cactus, a fern, a rubber plant, a succulent, a trailing plant, in different pots) on shared hairlines that run rail to rail: four across from sm, three on a phone. Choose a plant and its tile grows to two cells wide and two tall, showing its light, water and height, while the others flow around it with grid-auto-flow: dense. One plant is open at a time, and choosing it again, the Put it back button or Escape returns it. A legend cell fills the last row while every plant is small and shrinks to a one-cell button beside the open tile, so the grid fills the same rows either way and the page never moves. The plants are drawn in the theme's greys. It's built from Guides, Button and Kbd. For catalogues, menus and any set where one item at a time deserves room.

FAQ

How does the grid keep its height?

Twelve plants plus a legend cell fill four rows of four (five rows of three on a phone). Open, the big plant takes four cells, so three plants' worth of room has to come from somewhere: the legend gives up all but one cell on desktop, or all of it on a phone, and the grid still fills the same rows. The open tile is placed by its own position in reading order, pushed in so a two-by-two always fits.

Does the reading order change?

No. The DOM order never changes, only the grid placement, so a screen reader and the Tab order follow the same list. Each plant is a button with aria-pressed, and a polite line says which plant is open.

Which keys work?

Tab visits the plants, Enter or Space grows or restores one, and Escape restores the open one while focus is inside the block. Put it back is a normal button.

How do I use my own photographs?

The drawn pictures are one Scene component. Where the code comment says so, replace it with an <img> (object-cover in a box of the picture's own ratio) and give each entry a src. Keep each entry's ratio the photograph's own so the layout doesn't change.

Are these real prices?

No. The names, prices and care notes are example data typed in each entry.

How does it fit on a phone?

Three columns by five rows of portrait tiles, with names under the pictures. The open plant takes two columns and two rows; the legend is hidden while it is open, so the grid is still fifteen cells.

All 100 gallery blocks