VLLNT UI · Component family

Learning components

Browse the Learning components currently implemented for the Native renderer.

Tutorials & Curriculum

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

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 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

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

Learner Utilities

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

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.