Contextual Hints Panel React component
A side panel of tips that follows what someone is doing: the hints change with the field or step in use, and learned ones fade away.
About the Contextual Hints Panel component
Contextual Hints Panel teaches a product while people use it. Instead of a tour they have to sit through, the tips change to match the field or step in front of them.
Mark a tip as learned and it fades, with a bar showing how far they've come. Anyone who doesn't want help can hide the panel.
When to use it
Use it beside complex forms, editors and setup flows.
Keep tips short and specific. Advice that could apply anywhere gets ignored.
Installation
Add the Contextual Hints Panel component to your project with the shadcn CLI. It lands in components/contextual-hints-panel.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/contextual-hints-panelProps
<ContextualHintsPanel /> accepts 7 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Tips for this step" |
| contexts | { id: string; label: string; hints: PanelHint[] }[] | DEFAULT_CONTEXTS |
| context Which context to show. Leave out to let people switch with pills. | string | — |
| defaultLearned Ids of hints already learned. | string[] | [] |
| onLearn | (hint: PanelHint) => void | — |
| onHide | () => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Tips for this step"
- contexts{ id: string; label: string; hints: PanelHint[] }[]Default: DEFAULT_CONTEXTS
- context
Which context to show. Leave out to let people switch with pills.
string - defaultLearned
Ids of hints already learned.
string[]Default: [] - onLearn(hint: PanelHint) => void
- onHide() => void
Contextual Hints Panel FAQ
- How does it know what someone is doing?
- You pass context. In the demo, each field sets it on focus.
- What if I leave context out?
- It shows topic pills, so people can pick for themselves.
- Are learned tips saved?
- Only for the session. Save them with onLearn and pass them back through defaultLearned.
- Does the panel change height?
- No. Every context shares one grid cell.
