vibecodng.com

Free MCP betaIndex and tools live

Measured entry

hextaui-team-notifications

teamminimal-flat

A client-side React notification center shipped as a shadcn registry block. It filters typed notification data, renders empty and populated states, and exposes callbacks for read, delete, and clear actions. It depends on lucide-react, a cn helper, and local shadcn avatar, badge, button, card, dropdown, empty, select, and separator primitives backed by Radix.

Specimen
Harness screenshot of hextaui-team-notifications at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of hextaui-team-notifications at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of hextaui-team-notifications 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-team-notifications
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical1
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal71.4 KB (136.8 KB build, 65.4 KB baseline)
Bare modeFAIL
Provider requiredNO
Demo usedwritten from the component source API

What the harness recorded

BARE BUILD

✗ Build failed in 1m 28s
error during build:
[vite:load-fallback] Could not load <sandbox>/src/lib/utils (imported by src/cut/blocks/team/team-notifications.tsx): ENOENT: no such file or directory, open '<sandbox>/src/lib/utils'

Verdict

A useful application shell with sensible callback boundaries and clean responsive behavior, but not a drop-in widget. It needs a shadcn-style setup to build and mount, and the filter controls need accessible names before production use.

Use it if

  • You already use shadcn conventions and need a team notification panel with type and read-state filters.
  • Your application owns notification storage and can connect the supplied read, delete, clear, and navigation callbacks.
  • You want a responsive card that handles both empty and populated notification states without a provider.

Skip it if

  • You need a standalone package that works without shadcn aliases, primitives, theme tokens, and utility helpers.
  • You cannot remediate the unnamed filter buttons flagged by accessibility testing before release.
  • You need built-in fetching, persistence, optimistic updates, loading feedback, or error handling.
  • You want a lightweight static list and do not need the Radix-backed filters and action menu.

Install

Installation record for hextaui-team-notifications
Declared dependencies@radix-ui/react-avatar, @radix-ui/react-slot, @radix-ui/react-dropdown-menu, @radix-ui/react-select, @radix-ui/react-separator
Missing on installnone
Bare installfails once the shadcn-style helpers are removed, so it needs that setup
Providerno provider required in the harness

In a non-shadcn project, add React, lucide-react, the required Radix packages, Tailwind theme tokens and utilities, a path alias, and a cn helper. You must also recreate or replace the avatar, badge, button, card, dropdown menu, empty state, select, and separator primitives, then give both filter triggers explicit accessible names.

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-14

Alternatives

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