Hero 209 - Inline video player with chapter timelinePro
Centered headline above an inline player whose custom scrubber is split into chapter segments; clicking a segment or a chapter label seeks the video and the active chapter is tracked as it plays.
About Hero 209
Centered headline above an inline player whose custom scrubber is split into chapter segments; clicking a segment or a chapter label seeks the video and the active chapter is tracked as it plays.
Hero 209 is a pro hero block for React, built on shadcn/ui and Tailwind CSS. It ships as 128 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- video
- chapters
- player
- timeline
- demo
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/hero-209Dependencies installed automatically: lucide-react.
Uses: button, reveal, utils.
Usage
import Hero209 from "@/components/blocks/hero-209"
export default function Page() {
return <Hero209 />
}