vibecodng.com

Free MCP betaIndex and tools live

Measured entry

hextaui-billing-billing-history

navbarminimal-flat

A client-side React billing-history card shipped as a shadcn registry item. It renders summaries, search, type and status filters, sorting, transaction rows, empty states, and pagination from supplied data. It depends on React state, Lucide icons, Tailwind theme classes, a cn helper, and local shadcn-style badge, button, card, input-group, select, and separator primitives.

Specimen
Harness screenshot of hextaui-billing-billing-history at 375 pixels wide
Harness screenshot at 375 pixels wide. This viewport scrolled sideways.
Harness screenshot of hextaui-billing-billing-history at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of hextaui-billing-billing-history 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-billing-billing-history
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowflagged at 375
Axe critical1
Axe serious1
Axe moderate0
Axe minor0
Gzip marginal68.1 KB (133.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 1.01s
error during build:
[vite]: Rollup failed to resolve import "lucide-react" from "<sandbox>re-b890059272fc/src/cut/blocks/billing/billing-billing-history.tsx".

Verdict

A useful, fairly complete billing dashboard block for an existing design system, but not production-ready unchanged. It needs a shadcn-style setup, explicit Lucide installation, accessibility repairs, and a narrow-screen overflow fix before adoption.

Use it if

  • You need an account billing panel backed by an already-loaded transaction array.
  • Your product already uses shadcn-style primitives, Tailwind theme tokens, and path aliases.
  • You want client-side search, filters, sorting, summaries, and pagination in one copyable block.

Skip it if

  • You need a narrow-screen layout without first fixing the observed horizontal overflow.
  • You must ship against strict accessibility gates before adding discernible names to controls and correcting low-contrast text.
  • Your history is large or server-paginated, since this component filters, sorts, and paginates the full array in the browser.
  • You want a dependency-light standalone component rather than a block coupled to several local UI primitives.

Install

Installation record for hextaui-billing-billing-history
Declared dependencies@radix-ui/react-slot, @radix-ui/react-select, @radix-ui/react-separator, clsx, tailwind-merge
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 slot, select, and separator packages, plus clsx and tailwind-merge. Recreate or replace the badge, button, card, input-group, select, and separator modules, provide the cn helper and import aliases, and map the Tailwind theme tokens used by the block.

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 navbar pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.