Learning components
Tutorials, timelines, and progress UI for guided experiences.
30 components
AI Chat Input
Prompt composer for conversational interfaces with helper text, toolbar actions, and submit states.
2 storiesAI Message Bubble
Chat bubble for assistant, user, tool, and system messages using the current design system surfaces.
3 storiesAI Source Citation
Compact source reference card for AI answers with a title, origin label, and optional excerpt.
1 storyAI Streaming Text
Readable text block for partial assistant output with an optional live cursor while tokens stream in.
2 storiesAI Tool Call Display
Structured card for tool invocation traces, statuses, serialized input, and returned output.
2 storiesAnnotation
Inline highlight with an attached contextual note.
2 storiesChecklist
Interactive checklist with progress tracking and toggleable items.
2 storiesCompletion Dialog
Dialog displayed upon completing a task or workflow.
2 storiesConversation Thread
Compound component family for AI chat UIs that orchestrates auto-scroll, streaming indicators, empty states, and message rendering.
3 storiesCurriculum
Course-layout container for a sequence of lessons or modules with title, progress, optional intro, and a stack of lesson rows.
2 storiesExercise
Interactive exercise block for learning content.
2 storiesFlashcard
Study card for active recall with prompt and answer states.
1 storyKey Concept
Highlighted definition block for key terms and a glossary list.
2 storiesKeyboard Shortcuts Help
Displays available keyboard shortcuts to the user.
2 storiesLearning Objectives
Lists learning goals for educational content.
2 storiesPro Tip
Highlighted tip block with variants for tips, best practices, gotchas, and more.
1 storyProfile Section
User profile display section with avatar and details.
2 storiesProgress Tracker
Curriculum-level learning dashboard for modules, lessons, exercises, streaks, and earned skills.
2 storiesQuiz
Interactive multiple-choice quiz with hints, explanations, and scoring.
2 storiesRating
Inline star rating for lightweight learner feedback.
2 storiesSearch Dialog
Full-screen search dialog with keyboard navigation.
2 storiesStep By Step
Numbered step guide with optional interactive completion tracking.
1 storyStepper
Sequenced steps with complete, current, and upcoming states.
2 storiesThinking Block
Collapsible block showing AI thinking/reasoning with streaming support.
1 storyTour
Guided onboarding flow for introducing content or interface patterns.
1 storyTutorial Card
Card for displaying tutorial previews with metadata.
1 storyTutorial Complete
Completion screen displayed when a tutorial is finished.
2 storiesTutorial Filters
Filter controls for browsing tutorials by category or difficulty.
1 storyTutorial Intro Content
Introduction section for tutorial pages with overview and prerequisites.
1 storyTutorial MDX
MDX renderer tailored for tutorial content with custom components.
1 story