shadcn.io is not affiliated with official shadcn/ui
Video Gallery Carousel Block for Radix UI
Six drawn screencast posters on a one-up stage that says no video plays in the demo, with a playlist rail of lengths, channels and views, a Watched toggle and Previous and Next buttons.
Installation
Overview
Present a short playlist without loading a single video, with this video gallery carousel for React with Radix UI. Clipshelf, a screencast library, shows six screencasts on a one-up stage as drawn posters (a terminal, a chart, a form, an editor, a board and a service graph, each a window in your theme's foreground weights) with the length as a chip and the words "No video in this demo" on every poster. Under the stage a caption band holds the title, "Video 3 of 6" with the channel, a Watched toggle and Previous and Next Buttons. Beside it, a playlist rail lists the six with a small poster, its length, the title, the channel and the views ("48.2K views"); the chosen row is ringed and the rail scrolls itself to keep it in view. Marking a video watched ticks its row and counts in the rail's head ("2 of 6 watched · 50 min"). On a phone the rail sits under the stage. The ruled bands come from Guides. It's built from Carousel, Button and Guides, with CSS transitions only. The titles, channels, views and drawings are made up for the example.
FAQ
How do I use my own videos?
Edit VIDEOS. Each has an id, a title, a channel, a length in seconds, a views count and a kind that picks its drawing. Lengths are written by clockOf, views by viewsOf and the playlist total by one sum, so nothing is typed twice. To play real videos, replace the poster in Still with your player and keep the cell's shape.
How do the stage and the playlist stay in step?
They share one page number: a rail press sets it, and so do a swipe on the stage, the arrow keys and the buttons. The rail has a fixed height, so choosing a video never moves anything else on the page.
The page is read from Embla's select event, and a rail press calls scrollTo.
How does it work with a keyboard?
Tab reaches the Watched toggle, Previous, Next and then each row of the playlist. With focus in the stage, the arrow keys move the videos (mirrored in a right-to-left layout) and Home and End jump to the first and last. Previous and Next stay in the tab order at the ends and are marked unavailable instead of disabled. Posters out of view are hidden from the tab order and from screen readers.