React Feedback Components — Alert, Toast, Progress, Tooltip
Feedback UI for React — Alert banners, Toast notifications, Progress bars, Tooltips. Drivn ships each as pure React with zero runtime dependencies.
Feedback is the interface answering the user: did that work, is something wrong, how long will this take, what does this icon do. Four surfaces cover almost every case. An alert states a condition that persists until it is resolved. A toast confirms an action and then gets out of the way. A progress bar makes waiting legible. A tooltip adds a one-line hint on hover. Blur the roles and trust erodes — an error buried in a toast vanishes before the user can act on it, an alert dressed like a hint gets scrolled past, and a tooltip carrying the only copy of a warning is invisible to every touch user.
Drivn ships each of these as its own small, standalone component, so you install just what your app needs and tune them in isolation. There is no toast manager to register, no <TooltipProvider> to wrap the tree in, no portal-provider boilerplate at the app root. Each surface is pure React and Tailwind — no Radix, no Floating UI, no notification library pulled into your bundle. This hub links every feedback component with a one-line description and the decision rule for when to reach for which.
Alert vs toast vs tooltip
Use alert for persistent, in-page conditions — "Your subscription expires in 3 days", "Upload failed, retry?". It stays until the user acts on it. Use toast for transient confirmations — "Settings saved", "Email sent". Toasts auto-dismiss and stack in a corner. Use tooltip for short hover hints on icons and compact controls.
A common mistake is a toast for an error that the user needs to fix. Errors belong in an alert inside the failing form or near the failing element. Toasts are for completed actions, not unresolved problems.
Progress indicators
The progress component runs in two modes. Determinate takes a known percentage and fills to it; reach for it any time you can actually compute remaining work — file uploads, batch jobs, a multi-step import where each step is a fixed fraction of the whole. Indeterminate loops without a value and suits short requests where a fabricated percentage would only mislead. Switching between them is a prop change, not a different component.
For flows that move through named stages — checkout, onboarding, a setup wizard — pair the bar with a stepper so the user sees both the overall fill and which phase they are in. The stepper handles click-to-jump, completed, and disabled-step states on its own, so you get labelled navigation without threading extra state through your form.
Tooltip placement and delay
Drivn's tooltip supports placement (top, right, bottom, left) and a configurable delay before show. Use a short delay (150-300 ms) to avoid flicker on fast mouse-throughs; avoid a 0 ms delay which creates noise. Tooltips hide on focus-out and on Escape.
Do not put essential information in a tooltip. If the content matters — a price, a warning, a required field — render it visibly. Tooltips augment, they do not replace.
Install
Install any feedback component with the Drivn CLI. Components are standalone — the toast system does not require a provider at the app root; alerts have no portal; tooltips render in place. This keeps the setup cost to zero and avoids the common React pitfall of forgetting to wrap the tree in a <ToastProvider> or <TooltipProvider>. Each install is one file copied into your project — see installation for details.
1 npx drivn add alert 2 npx drivn add toast 3 npx drivn add progress 4 npx drivn add tooltip
Install Drivn in one command
Copy the source into your project and own every line. Zero runtime dependencies, pure React + Tailwind.
npx drivn@latest createRequires Node 18+. Works with npm, pnpm, and yarn.