Agent UX/UI · Onboarding

Onboarding 引导卡片

复刻 HeroUI 官网角落那张新功能引导卡片，做成「可换角落 · 可替换内部元素 · 可挂事件回调」的复合组件。下方 playground 会从浏览器视口角落真实弹出。

弹出位置 position
距角落间距 offset · 24px
事件回调日志open
点击卡片上的按钮 / 关闭，回调会打到这里…
可替换内部元素 · 变体画廊
① 默认实现 · OnboardingBanner
bottom-left
Pro
Now available

Build faster with HeroUI Pro

Components, templates, and AI tooling for React and React Native. Made for teams that care about the details.

② 替换 media / 背景 / 按钮
top-right
新手引导

3 步上手工作流

跟着交互式向导走一遍，30 秒了解核心能力。

③ 复合组件手搓 · 自定义结构
bottom-right

有 1 条新通知

你订阅的构建已完成，点开查看详细日志与产物。

复合组件结构 ——Onboarding.Root（角落定位 + 入场动画 + 受控开关）内放Media / Close / Body /Title / Description / Footer /Action，每块都能换。OnboardingBanner 是基于它们拼好的开箱即用默认款。
Pro
Now available

Build faster with HeroUI Pro

Components, templates, and AI tooling for React and React Native. Made for teams that care about the details.