react-nudge-ui

react-nudge

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.

Features

• 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

Installation

npm install react-nudge-ui

or with yarn:

yarn add react-nudge-ui

Usage

import React from "react";
import { Nudge } from "react-nudge-ui";

function App() {
return (

Nudge Button

); }

export default App;

Props

Props

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
persistent	boolean	false	When true, the nudge remains visible permanently and ignores duration

Styling

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

License

MIT © Jeremie Nombro

Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

Author

Jeremie Nombro