The whole dashboard — every page under one sidebar, the sample data they read — is one command. Or take a page at a time: each one brings the sidebar with it.
npx shadcn@latest add @vibra/academy/academyAcademy dashboardnpx shadcn@latest add @vibra/academy-overview/academy/coursesCourse cataloguenpx shadcn@latest add @vibra/academy-courses/academy/courses/[id]Course pagenpx shadcn@latest add @vibra/academy-course/academy/studentsStudent rosternpx shadcn@latest add @vibra/academy-studentsSingle cards cut from these pages, each installed on its own.
npx shadcn@latest add @vibra/widget-academy-overview-welcome-cardThe learner greeted by name, with their courses in progress, their hours in the last thirty days, their certificates and their streak, and a way into the catalogue; reads learnerSummary().
npx shadcn@latest add @vibra/widget-academy-overview-learning-pathsThe two tracks through the catalogue, each with the modules finished and a bar; reads learningPaths().
npx shadcn@latest add @vibra/widget-academy-overview-leaderboardThe five members with the most points this term, ranked; reads leaderboard().
npx shadcn@latest add @vibra/widget-academy-overview-success-rate-panelThe share of every enrolment that finished, against the term before, with the learners and the passing count behind it; reads successRate().
npx shadcn@latest add @vibra/widget-academy-overview-progress-tilesThe learner's catalogue in two tiles — under way and finished — each with its share as a bar; reads progressSplit().
npx shadcn@latest add @vibra/widget-academy-overview-activity-donutHow the term's hours were spent, mentoring, organising and planning, as a donut; reads activityMix().
npx shadcn@latest add @vibra/widget-academy-overview-completion-chartAverage course completion across every learner, month by month over the last twelve complete months; reads completionByMonth().
npx shadcn@latest add @vibra/widget-academy-overview-courses-tableThe catalogue with what is open at the top, searchable and filtered by category, a course under way moved on a tenth through the server from its row; reads courseRows().
npx shadcn@latest add @vibra/widget-academy-courses-catalogue-figuresThe courses in the catalogue and the categories they cover, everyone ever enrolled, the share who finished, and the average rating; reads catalogueTotals().
npx shadcn@latest add @vibra/widget-academy-course-course-figuresEveryone the course has enrolled, the share who finished, its rating, and the students on it now with how far through they are; reads courseRecord(id).
npx shadcn@latest add @vibra/widget-academy-course-enrolment-chartNew learners on the course each week over the last twelve complete weeks; reads courseRecord(id).
npx shadcn@latest add @vibra/widget-academy-course-course-rosterThe students on the course now, furthest along first, each with a face, their progress, when they joined and were last in, and where they stand; reads courseRecord(id).
npx shadcn@latest add @vibra/widget-academy-course-instructor-cardWho teaches the course — their face and an address to write to — with the courses they teach, the learners those have taken and their rating; reads courseRecord(id).
npx shadcn@latest add @vibra/widget-academy-course-completion-funnelEveryone enrolled, how many opened the course and how many finished, each step with its share of the first and the rate from the step before; reads courseRecord(id).
npx shadcn@latest add @vibra/widget-academy-course-lesson-listThe course lesson by lesson — its kind, its length and how many students are past it — eight at first and the rest folded out in place; reads courseRecord(id).
npx shadcn@latest add @vibra/widget-academy-students-roster-figuresEveryone on the roster and how many are active, how many were in this week and their share of the roster, the average progress across their places, and how many graduated; reads rosterTotals().
Every figure on these pages is read from these repositories of the sample store. Swap one for your own API and each page that reads it follows.