Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Gallery blocks

Pro

Index Preview Portfolio Gallery Block for React

A numbered index of eight projects whose rows are links, with one drawn picture that changes as the pointer or keyboard focus moves between them.

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

An index-preview portfolio for React with Base UI, for Studio Onward, an independent design studio. Behind a split divider the start column is a numbered list of eight projects, each row a link with its number, client, discipline and year, with a + mark where the rule meets the divider. The end column is one framed picture that follows the row under the pointer or the one with keyboard focus: a brand mark, an app screen, a poster or packaging, drawn in code in your theme's greys. The first row shows until you choose another. On phones the picture is a small band above the index and a tap on a row previews it. The studio, its clients and the projects are made up for the example. Built from Guides and your own links.

FAQ

Is the preview only for the mouse?

No. Moving the pointer onto a row or focusing it with Tab shows its picture, and on a touch screen a tap does the same. The picture only repeats what the row says, so it is hidden from assistive technology and the rows stay the content.

How do I use my own pictures?

PROJECTS lists the rows, each with an art kind and a version, and ArtFor picks the drawing. Replace the drawings with an img per project (the stack of pictures is one grid cell, only the chosen one visible), and keep the 4 by 3 box.

What happens with reduced motion?

The picture changes at once, without the short cross-fade.

Does it work in a right-to-left page?

The split, the rows and the arrow mirror, and the year and number are isolated so the digits keep their order.

How does it fit a phone?

The picture moves above the list as a short band so it is visible while you choose, and the rows keep their size.

  • Pro

    Evolution Case Study Gallery

    Annotated pictures

    One identity in four pictures (a logo sketch, a wireframe, a mock-up and the shipped screen) beside a sticky summary and a stage index whose bar follows the stage on screen.

  • Pro

    Inline Expansion Thumbnail Grid

    Hairline grids

    Sixteen drawn thumbnails on shared hairlines, eight across, where choosing one opens a preview band straight under its row with the whole picture, its source, Previous, Next and Close, without changing the block's height.

  • Pro

    Hover Card EXIF Gallery

    Hairline grids

    Six drawn frames in cells of their own, each a link with a hover card of camera, lens, aperture, shutter speed and ISO that opens on hover and on keyboard focus, and prints the same settings in the caption on a touch screen.

  • Pro

    Featured Hero Gallery

    Masonry and mosaic

    A boat-charter gallery on one hairline grid: a featured picture two cells wide and tall beside four small ones, and choosing a small picture swaps it with the featured one in place.

  • Pro

    Centered Masonry Gallery Hero

    Mobile and media

    A showcase hero for a design studio: a centered headline with a Shine Button, over a masonry wall of six projects drawn in greyscale inside a hairline frame that fades out at its foot.

  • Pro

    Snap Row Case Study Cards

    Customers

    A scroll-snap row of five case-study covers, each with a drawn wordmark, a giant result figure, two tags and a link, and a wider first card.

All 100 gallery blocks