Anatomy of the Course Detail Page
A course detail page is the screen where a learner lands after choosing a course: it plays the lessons, explains what the course covers, and tracks how far the learner has come. This block delivers the whole screen at once. The main column stacks a video player, a course details card, and an instructor profile, while a sticky sidebar carries the curriculum with a live completion percentage.
The video player is a custom-built component with play and pause, volume and mute, a settings control, and a fullscreen toggle. The details card presents the course rating with stars, student count, lesson total, and duration, followed by a what-you-will-learn checklist. The curriculum sidebar lists every lesson with completion markers and durations inside a scrollable area, and a circular progress indicator summarizes the learner's status.
Who Needs a Course Page Block
The obvious home is an online learning platform, from a full LMS to a single-course landing product. Bootcamps, corporate training portals, and internal onboarding academies all need exactly this arrangement of video, syllabus, and progress. Because the curriculum data lives in a simple data file, the same layout also suits video podcast archives or tutorial libraries.
It also pairs naturally with other education-flavored blocks. Teams building assessment features often combine it with a quiz app block so learners can test themselves after finishing a lesson, and the progress model extends cleanly to certificates or streak features.
How the Page Is Built
The block is organized as six focused React components: a course header, the video player, the curriculum, the details card, the instructor profile, and a reusable circle progress element. Each piece manages its own state with useState, useRef, and useCallback, so there is no global store to configure. Lesson data is imported from a shared data.ts file, giving you one obvious place to plug in an API.
On the Shadcn UI side, the page composes Card, Badge, Button, Avatar, Separator, Progress, ScrollArea, and Drawer. On mobile, the desktop sidebar disappears and the curriculum moves into a Drawer opened from the header, which keeps the video full width on small screens. Tailwind's responsive grid utilities handle the two-thirds and one-third column split on large displays.
Restyling the Layout for Your Brand
All surfaces reference Shadcn UI design tokens: cards sit on the card variable, metadata uses muted-foreground, and the progress indicators inherit the primary color. Changing the CSS variables in globals.css restyles the entire page in one edit, and dark mode is automatic because no color is hard-coded.
Structure is just as adjustable. Because each section is its own component file, you can reorder the main column, remove the instructor profile, or swap the checklist for a reviews section without touching unrelated code. The circular progress component takes its value as a prop, so it can reflect any completion metric your platform tracks.
From Demo Data to a Live Course
Install the block with the shadcn CLI command at the top of the example page, which is offered with npm, pnpm, yarn, and bun. The command pulls in the page, all six components, and the data file. If you prefer, copy the files manually from the code tab. Both routes require an All Access plan since this is a pro example.
To go live, replace the contents of data.ts with lessons fetched from your backend, point the video player at your streaming source, and persist completion state to your database instead of local state. The block is also available in Vuejs and Svelte versions, with the Svelte edition built on shadcn-svelte, so mixed-stack teams can ship the same course page everywhere.