A lightweight React component to subtly draw attention to UI elements with animated rings and customizable tooltips — perfect for onboarding hints, feature highlights, or gentle nudges in your app.
- Animated pulse ring around any React element
- Customizable ring color, size, and border radius
- Tooltip with flexible positioning (top or bottom)
- Smooth floating animation for tooltips (optional)
- Customizable tooltip styles: background, text color, font size, padding, and more
- Control tooltip visibility duration
- Easy to integrate and style
npm install react-nudge-ui
or with yarn:
yarn add react-nudge-ui
import React from "react";
import { Nudge } from "react-nudge-ui";
function App() {
return (
Nudge Button
);
}
export default App;
Prop | Type | Default | Description |
---|---|---|---|
children |
React.ReactNode | — | The wrapped React element to highlight |
hint |
string | — | Tooltip message to display |
duration |
number | 5000 | Time in milliseconds the nudge is visible |
ringColor |
string | #007bff |
Color of the animated ring |
ringSize |
number | 8 | Thickness (in px) of the ring |
ringBorderRadius |
string | — | Border radius of the ring (e.g., 12px , 50% ) |
tooltipBgColor |
string | #333 |
Background color of the tooltip |
tooltipTextColor |
string | #fff |
Text color of the tooltip |
tooltipFontSize |
string | 14px |
Font size of the tooltip text |
tooltipPadding |
string | 6px 12px |
Padding inside the tooltip |
tooltipPosition |
"top" | "bottom" | "top" |
Position of the tooltip relative to the element |
tooltipFloating |
boolean | true |
Whether the tooltip floats with smooth animation |
zIndex |
number | — | Custom stacking order for tooltip and ring |
className |
string | — | Optional custom CSS class for the wrapper |
tooltipClassName |
string | — | Optional custom CSS class for the tooltip |
ringClassName |
string | — | Optional custom CSS class for the ring |
You can customize the styles either via props or by overriding CSS classes:
-
.nudge-wrapper
— wrapper div -
.nudge-ring
— animated ring element -
.nudge-tooltip
— tooltip container
MIT © Jeremie Nombro
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
Jeremie Nombro