shadcn.io is not affiliated with official shadcn/ui
Tech Stack Carousel Block for React
Eleven technology tiles on a hairline track, each as wide as the number of services that use it, with a version, a category, an adoption word and dot, a legend with counts that add up, and Previous and Next that move one tile.
Installation
Overview
Show how much weight each tool carries, with this tech stack carousel for React with Base UI. Stackholt, an engineering handbook, lists the eleven technologies behind its example product (TypeScript, Go, Python, PostgreSQL, Redis, ClickHouse, Node.js, Deno, Kubernetes, Terraform and Grafana) on one ruled track. A tile is as wide as the number of services that use it, from one to six units, derived from a typed list of which services run on which technology, and holds the name, the version, a category word, an adoption word beside a dot of its own weight (Adopt, Trial, Assess, Hold), a row of unit marks and the first services by name. The track snaps at the start of each tile and Previous and Next move one tile. A legend band under it counts the tiles by category (Language, Data, Runtime, Operations), the counts add up to eleven, and a key explains the four dots. It is built from Carousel, Button and Guides. The product, the stack and the service names are made up.
FAQ
How do I use my own stack?
Edit TECH. Each has an id, a name, a version, a category, an adoption word and a services list of ids from SERVICE_NAMES. The width, the unit marks, the "3 services: Billing API, Admin console and 1 more" line and the legend counts are all derived from those lists, so adding a service to a technology widens its tile and nothing else needs editing. Add a new category to CATEGORIES to have it counted in the legend.
How is a tile's width worked out?
One helper turns the number of services (clamped to one through six) into a width, from about ten rem for one to about eighteen rem for six. The classes are written out in full so the stylesheet keeps them. Tiles are never narrower than their name and version.
Is adoption shown by colour?
No. The word is always there, and the dot only adds weight: solid for Adopt, half for Trial, a ring for Assess and a faint ring for Hold. All of them use your theme's foreground.
How does it work with a keyboard?
Tab reaches Previous and Next; they stay in the tab order at the ends and are marked unavailable instead of disabled. With focus inside the panel the arrow keys move one tile (mirrored in a right-to-left layout) and Home and End jump to the ends. The one polite line says which tile the view starts at ("From Redis, 5 of 11"). Tiles keep their own widths and Embla snaps at each start; the last positions are trimmed so the track never shows empty space.