shadcn.io is not affiliated with official shadcn/ui
Feature Highlights Carousel Block for React
Nine capability cells for a team workspace on a hairline track with no ends, the middle cell whole and its neighbours smaller and muted, with dots that wrap and a counter that says where the last cell goes next.
Installation
Overview
Show what a product does one capability at a time, with this feature highlights carousel for React with Base UI. Orbitdesk, a team workspace, lists nine capabilities (a shared inbox, threaded replies, handoff notes, saved views, roles and access, search, an audit trail, quiet hours and exports) as cells with a line icon, a title and a sentence. The cell in the middle is whole and tinted while its neighbours sit smaller and muted, and only the middle one is read by a screen reader and reachable. The track has no ends: Previous and Next never disable, the nine dots wrap, and at the last cell the counter says "Feature 9 of 9, then 1". Three cells show from the medium breakpoint, and a phone shows one with a sliver of each neighbour. It's built from Carousel, Button and Guides, with CSS transitions only. The product and the copy are made up for the example.
FAQ
How do I use my own features?
Edit FEATURES. Each has an id, a kind (which icon Glyph draws), a title and a text. The counter, the dots, the slide names and the live line are all derived from that list, so add or remove entries and nothing else changes. Keep enough cells that three fit in view; with fewer than that, a looping track has nothing to loop over.
How does the loop work?
Previous and Next wrap with wrapOf, so the track comes round from the ninth cell to the first and back. The dots wrap with it and the counter names the way round at the last cell.
Embla's loop option makes the wrap seamless, with neighbours on both sides of every cell, and align: "center" keeps the current cell in the middle.
Why are the neighbours smaller?
Only the cell at the current position is the subject. It gets the full size and a tint; the others scale down, fade, and are hidden from assistive technology and the tab order with aria-hidden and inert, so a screen reader reads one feature at a time. Under reduced motion the change is instant.
How does it work with a keyboard?
Tab reaches the dots, Previous and Next. With focus inside the carousel, the arrow keys move one cell (mirrored in a right-to-left layout) and Home and End jump to the first and last cell. The buttons are never disabled, so focus never lands on a dead end.