shadcn.io is not affiliated with official shadcn/ui
Index Preview Portfolio Gallery Block for Radix UI
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.
Installation
Overview
An index-preview portfolio for React with Radix 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
Where do the rows link to?
Each row's href is # plus the project's id, a placeholder: replace it with the project's page. Choosing a row in a real site would navigate; the preview only helps you decide where to go.
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.