shadcn.io is not affiliated with official shadcn/ui
Portfolio Carousel Block for React
Six drawn case-study plates on a hairline track with a kind filter, and a detail cell beside it for the plate you pressed: the role, a timeline worked out from its months, three results and a line from the client.
Installation
Overview
Show a studio's work and let people read one case at a time, with this portfolio carousel for React with Base UI. Studiolane, a design studio, shows six cases. A Segment Group filters them by kind (All, Brand, Product, Packaging) and each plate on the hairline track is a greyscale mock-up of the work drawn in your theme's foreground weights, never a photograph, with the title, the client, a kind chip and the key result. Pressing a plate chooses it, and a detail cell beside the track shows the role, the timeline (the months between its start and end, counted from the typed dates), three results and one line from the client. Filtering takes the track back to its first plate and moves the detail to it if the chosen case drops out. Two plates show from the large breakpoint, one with the next peeking on a phone, where the detail stacks under the track. The studio, clients and results are made up.
FAQ
How do I add my own cases?
Edit STUDIES. Each has an id, a category (add a kind to FILTERS too), a client, an industry, a title, a role, from and to as ISO year-months, three results, a quote and a look: lines of tone x y width height radius in a 160 by 100 box. With real photographs, swap the Plate drawing for an img of the same ratio.
What happens when I filter?
The track shows only that kind and goes back to its first plate. If the case you were reading is filtered out, the detail shows the first plate that is left, so it is never empty. Every kind has at least two cases, so the track never has zero plates.
What is the difference between choosing and scrolling?
A press on a plate chooses it (aria-current); the track never moves when you choose. The arrows, Previous and Next only scroll. The detail holds its height because all six sit in one grid cell, the others unseen.
How does it work with a keyboard?
Tab reaches the kind switch, each visible plate, Previous and Next. The switch's own arrow keys change the kind. In the track, the arrow keys move by one plate (mirrored in a right-to-left layout) and Home and End jump to the ends.
The step is Embla's slidesToScroll; the track re-measures when it changes.