Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Video Playlist Sidebar Features Block for React Aria

A features section drawn as a tutorial player: a poster that draws the chosen tutorial's flow as linked nodes with its title, beside a playlist of five tutorials as vertical tabs and a Play next switch.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A features section for React with React Aria, drawn as the tutorial page of a workflow-automation builder. One panel, two cells on shared hairlines: a poster that draws the chosen tutorial's flow (linked nodes on a dotted canvas, the node the video is about filled) with its title and a sentence, and a playlist of five tutorials as vertical tabs, each with a thumbnail of the same flow, a title, a length and a watched tick. A "Play next" switch adds an up-next chip to the poster and marks the row that follows. Nothing plays. On a phone the playlist becomes a snap scroller under the poster. It's built from Tabs, Switch, Badge and the Guides line kit, with your theme's tokens for every colour and no primary button.

FAQ

How do I change the tutorials?

Edit VIDEOS at the top of the file. Each tutorial has a length in seconds, the node it's about (focus), its nodes with a position in percent and an icon, its links as pairs of node ids, a title and a sentence. The poster and the thumbnail are drawn from the same data, so they always match, and the curves between nodes are computed from the node positions.

Does it play video?

No. The poster is a drawing, so the play pill and the length on it are decoration and are hidden from assistive technology. Swap the poster for your own video element and keep the playlist as the chooser.

What does Play next do?

It's on by default. With it on, the poster shows an "Up next" chip with the title that follows, and the row after the chosen one carries a "Next" badge. Turning it off hides both without moving anything, because their space stays reserved.

How does it work from the keyboard?

Tab enters the playlist, the Up and Down arrows move between tutorials and choosing one shows its poster, title and sentence at once. The panel under the tabs is a tab stop of its own, and the switch is a normal control with the name "Play next". On React Aria the arrow keys move between the tabs in the same way, and the selected tab is the one in the page's tab order.

When does a tutorial count as watched?

When you open it. The first tutorial starts as watched and each one you choose gets a tick, which is state in the page and is not saved. Wire it to your own progress data to make it persist.

How does it fit on a phone?

The poster comes first with its title under it, then the playlist as a row of cards you scroll sideways with snapping, with the next card peeking in. The vertical-tab arrow keys still move between tutorials, even though the row lies sideways.

All 170 features blocks