Teaching
TeachingPopover introduces a new feature or walks people through steps, right next to the related element.
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
// npm install yugen-uiimport { TeachingPopover, TeachingPopoverTrigger, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, TeachingPopoverTitle, TeachingPopoverFooter, TeachingPopoverCarousel,} from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Brand & illustration
appearance="brand" on TeachingPopover; media appears above the content.
Vertical footer
orientation="vertical" stacks the two buttons at full width, which suits long labels.
Multiple steps (Carousel)
Each child of TeachingPopoverCarousel is one step. The first step has “Not now”, the last one “Finish”.
Usage
- Show only one TeachingPopover at a time, attached to the element it introduces.
- Keep the title short and the content to 1–2 sentences. Always offer a way to close it (the X button or the secondary button).
- Limit multi-step tours to 3–5 steps.
- Don't use it for error messages or confirmations. Use MessageBar / Dialog.
- Don't open it again after people have dismissed it.
- Don't put forms or long content in the surface.
Props
| Prop · Type | Default | Description |
|---|---|---|
| TeachingPopover | Default: "normal" | Applies to the surface, header and buttons. |
| TeachingPopover | Default: — | Controls visibility (Radix Popover). |
| TeachingPopoverSurface | Default: withArrow = true | Surface position (320px wide). |
| TeachingPopoverHeader | Default: lightbulb / true | Icon before the title; close button. |
| TeachingPopoverBody | Default: — | Illustration above the content. |
| TeachingPopoverFooter | Default: — | Labels of the two buttons; the secondary button closes the popover. |
| TeachingPopoverFooter | Default: — | Closes the popover when the primary button is clicked; direction of the buttons. The old name layout is deprecated (removed in 1.0). |
| TeachingPopoverCarousel | Default: — | Current step (starting at 0). |
| TeachingPopoverCarousel | Default: — | onFinish runs when “Finish” is clicked. nextLabel / previousLabel / finishLabel / dismissLabel replace “Next” / “Back” / “Finish” / “Not now”. |
Messages
Text built into the component: labels, aria-labels, screen reader announcements.
English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.
messages.teachingPopover
| Key · Type | Default (English) | messagesVi |
|---|---|---|
| closestring aria-label nút X của TeachingPopoverHeader. | Default (English)"Close" | messagesVi"Đóng" |
| nextstring Nút của TeachingPopoverCarousel. | Default (English)"Next" | messagesVi"Tiếp" |
| previousstring | Default (English)"Back" | messagesVi"Quay lại" |
| finishstring | Default (English)"Finish" | messagesVi"Hoàn tất" |
| laterstring Nút phụ ở bước đầu (đóng popover). | Default (English)"Not now" | messagesVi"Để sau" |
| stepRoleDescriptionstring aria-roledescription của từng bước. | Default (English)"step" | messagesVi"bước" |
| step(current: number, count: number) => string Tên bước hiện tại; | Default (English)(current, count) => `Step ${current} of ${count}` | messagesVi(current, count) => `Bước ${current}/${count}` |
| goToStep(index: number) => string aria-label chấm điều hướng; | Default (English)(index) => `Go to step ${index}` | messagesVi(index) => `Đến bước ${index}` |