VLLNT UI · Component family

Learning components

Learning components structure guided experiences — curricula, tutorials, flashcards, quizzes, steppers, progress trackers, and tours. Compose them into onboarding flows, courses, and interactive docs.

Tutorials & Curriculum

Tutorial and curriculum components for building courses, lesson browsers, and guided onboarding tours.

Curriculum

Course-layout container for a sequence of lessons or modules with title, progress, optional intro, and a stack of lesson rows. Install Curriculum from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
2 storiesView component

Tour

Guided onboarding flow for introducing content or interface patterns. Install Tour from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Tutorial Card

Card for displaying tutorial previews with metadata. Install Tutorial Card from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
1 storyView component

Tutorial Complete

Completion screen displayed when a tutorial is finished. Install Tutorial Complete from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Tutorial Filters

Filter controls for browsing tutorials by category or difficulty. Install Tutorial Filters from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Tutorial Intro Content

Introduction section for tutorial pages with overview and prerequisites. Install Tutorial Intro Content from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
1 storyView component

Tutorial MDX

MDX renderer tailored for tutorial content with custom components. Install Tutorial MDX from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
1 storyView component

Quizzes & Exercises

Interactive quiz, exercise, and flashcard components with ratings for active-recall learning.

Quiz

Interactive multiple-choice quiz with hints, explanations, and scoring. Install Quiz from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Exercise

Interactive exercise block for learning content. Install Exercise from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Flashcard

Study card for active recall with prompt and answer states. Install Flashcard from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Rating

Inline star rating for lightweight learner feedback. Install Rating from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Progress & Steps

Learning progress components — checklists, steppers, progress trackers, and completion dialogs for tracking course advancement.

Checklist

Interactive checklist with progress tracking and toggleable items. Install Checklist from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Completion Dialog

Dialog displayed upon completing a task or workflow. Install Completion Dialog from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Progress Tracker

Curriculum-level learning dashboard for modules, lessons, exercises, streaks, and earned skills. Install Progress Tracker from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Step By Step

Numbered step guide with optional interactive completion tracking. Install Step By Step from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Stepper

Sequenced steps with complete, current, and upcoming states. Install Stepper from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Study Aids & Callouts

Study aid components — annotations, key-concept blocks, pro tips, and learning objectives for educational content.

Annotation

Inline highlight with an attached contextual note. Install Annotation from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
2 storiesView component

Key Concept

Highlighted definition block for key terms and a glossary list. Install Key Concept from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
2 storiesView component

Learning Objectives

Lists learning goals for educational content. Install Learning Objectives from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
2 storiesView component

Pro Tip

Highlighted tip block with variants for tips, best practices, gotchas, and more. Install Pro Tip from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
1 storyView component

Learner Utilities

Learner utility components — profile sections, search dialogs, and keyboard shortcut helpers for learning platforms.

Profile Section

User profile display section with avatar and details. Install Profile Section from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
2 storiesView component

Search Dialog

Full-screen search dialog with keyboard navigation. Install Search Dialog from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Keyboard Shortcuts Help

Displays available keyboard shortcuts to the user. Install Keyboard Shortcuts Help from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Frequently asked

What's in the learning family?
Tutorials and curricula, lessons and flashcards, quizzes and exercises, steppers, progress trackers, and guided tours — the scaffolding for learning products.