vibecodng.com

Free MCP betaIndex and tools live

Measured entry

hextaui-sonner

alertminimal-flat

A client-side Toaster wrapper around Sonner, shipped as a shadcn registry component. It syncs toast appearance through next-themes, supplies Lucide status icons, and expects Tailwind utility classes plus shadcn-style color and radius variables.

Specimen
Harness screenshot of hextaui-sonner at 375 pixels wide
Harness screenshot at 375 pixels wide. This viewport scrolled sideways.
Harness screenshot of hextaui-sonner at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of hextaui-sonner at 1440 pixels wide
Harness screenshot at 1440 pixels wide. No horizontal overflow recorded.

Measured

Every value below was written by the harness on the run that produced the frames above. None of it is derived from the prose.

Harness measurements recorded for hextaui-sonner
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowflagged at 375
Axe critical0
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal32.1 KB (97.6 KB build, 65.5 KB baseline)
Bare modeFAIL
Provider requiredNO
Demo usedwritten from the component source API

What the harness recorded

BARE BUILD

✗ Build failed in 641ms
error during build:
[vite]: Rollup failed to resolve import "lucide-react" from "<sandbox>re-fe8c29a816fa/src/cut/components/ui/sonner.tsx".

Verdict

A sound choice for shadcn-like apps: it built and mounted in both configured and bare harnesses, with clean automated accessibility checks. The main caveats are its theme and icon dependencies and the compact-view overflow seen in the demo.

Use it if

  • You want one app-level toaster that can be triggered from feature code through Sonner.
  • Your project already uses next-themes and the usual shadcn design tokens.
  • You want consistent icons and polite live-region behavior without configuring each toast call.

Skip it if

  • Your app does not use next-themes and adding theme plumbing only for notifications is unjustified.
  • You need a dependency-light notification layer without Sonner and Lucide.
  • Your narrow layout cannot tolerate the horizontal overflow observed in the compact viewport.
  • You need a deeply bespoke notification queue or interaction model rather than a styled Sonner wrapper.

Install

Installation record for hextaui-sonner
Declared dependenciessonner, next-themes
Missing on installnone
Bare installfails once the shadcn-style helpers are removed, so it needs that setup
Providerno provider required in the harness

Install Sonner, next-themes, and Lucide React, then copy the client component and mount Toaster near the application root. Provide the popover, border, and radius CSS variables and equivalent Tailwind utilities. Add a next-themes provider if you want the wrapper to follow the active theme.

Source and credit

This page is a review, not a copy. The component source lives with its author and this site does not republish it. Read the license before you use anything.

Author repository

github.com/preetsuthar17/HextaUI
License
MIT
Record published
2026-08-17

Alternatives

Other published entries for the alert pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.