react-nudge-ui
TypeScript icon, indicating that this package has built-in type declarations

0.1.15 • Public • Published

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

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

Readme

Keywords

none

Package Sidebar

Install

npm i react-nudge-ui

Weekly Downloads

1

Version

0.1.15

License

none

Unpacked Size

25.9 kB

Total Files

6

Last publish

Collaborators

  • guinom