Content
WelcomePanel
A short welcome on someone's very first visit: one panel, or two to three tips in sequence, each able to point at a part of the page with "Show me".
Preview
Props
| Prop | Type | Description |
|---|---|---|
tipsRequired | WelcomeTip[] | One panel, or a short sequence (2 to 3) with "Tip 1 of 3" and dots. |
eyebrow | string | |
onDone | () => void | The last tip's button ("Get started"). |
doneLabel | string | |
onSkip | () => void | Adds Skip on every tip but the last. |
skipLabel | string | |
headingLevel | number | |
className | string |
Guidelines
A short welcome on someone's very first visit: one panel, or two to three tips in sequence, each able to point at a part of the page with "Show me". Skippable, and never shown again once finished or skipped.
Provide: tips: a list of { title, body, illustration or icon, href, action }, onDone (the last tip's button, default "Get started"), onSkip (adds Skip on every tip but the last), eyebrow, headingLevel.
- Keep it to three tips at most, each one sentence or two. Point at the things people use every day (on Home: the calendar, the board and the setup checklist), not at settings.
- Illustrations come from the Makado set and are fine here: the welcome is a small celebration of starting. Use one per tip at most.
- Inline at the top of the page on a solid surface, never a modal or a glass overlay: the page stays usable around it.
- Remember that it was seen on the person's profile, so it does not come back on another device.
- Copy: "Welcome to Makado", "Plan on the calendar". Sentence case, no exclamation points.
Accessibility: the panel is a labelled region. Next moves keyboard focus to the new tip's title, so screen readers read it; "Tip 2 of 3" is in text, the dots are decorative. Show me is an ordinary link to the part of the page it names. The fade between tips is skipped with reduced motion.