Video Library
Course video library with continue-watching bars, level filters and hover-to-play thumbnails.
- Type: Media section
- Styles: Dark, Light
- Licence: Charcoal UI Pro
About Video Library
Video Library lists lessons as thumbnails with durations, a progress bar for what has been watched, a watched badge and level filters. Hovering a thumbnail reveals a play button.
It is a full-width media section for React and Tailwind CSS 4, in a dark and light style. Preview it at any width above, then install it with one command.
When to use Video Library
- Online courses and schools.
- Members-only creator videos.
- Product tutorials.
- Conference recordings.
How it is built
Lessons take a title, course, minutes, watched fraction, image and level, and filtering is local.
It has no component dependencies beyond the shared utilities, so it is one file to read and change.
Goes well with Video Library
Video Library is part of 3 full templates, so you can see it in a finished page.
- Darkroom template: A course people finish.
- Cohort template: Sell a course like a creator.
- Backstage template: Members-only videos, done properly.
- Podcast Episodes: A React podcast section with artwork, episode list and a live player
- Music Album: A React album release section with a sliding, spinning vinyl and tracklist
Install Video Library
npx shadcn@latest add @charcoal/video-libraryVideo Library is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.
Frequently asked questions
- Does Video Library work with Next.js?
- Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
- Can I change the copy and colours?
- Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.