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 how the interface tells the user what happened. An alert states a persistent condition. A toast confirms an action and disappears. A progress bar shows elapsed work. A tooltip adds a short hint on hover. Getting these wrong breaks trust — a missing toast makes users double-click; an alert that looks like a tooltip gets ignored; a tooltip with essential info is invisible on mobile.
Drivn ships each feedback surface as its own small component so you install only what your app needs and tune each one independently. This hub links every feedback component in the library with a short description and the decision criteria for when to use which. All four components are pure React and use Tailwind for styles — no Radix, no Floating UI, no toast manager package, and no portal-provider boilerplate at the app root.
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 has two modes: determinate (percentage known) and indeterminate (work in progress, duration unknown). Use determinate whenever you can compute remaining work — uploads, batch operations, multi-step flows. Use indeterminate for short network requests where a percentage would be misleading.
For per-step flows (checkout, onboarding), pair a progress bar with a stepper to show both overall progress and the current phase. The stepper handles click-to-jump and disabled-step states without extra wiring.
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.