vibecodng.com

Free MCP betaIndex and tools live

Measured entry

hextaui-billing-payment-form

formminimal-flat

A client-side React card-entry form distributed as a shadcn registry item. It manages card, expiry, security code, cardholder, optional billing address, and save or default state, then hands raw values to a callback. It relies on HextaUI or shadcn primitives, Radix-backed controls, Lucide icons, Tailwind classes, and the shared cn utility.

Specimen
Harness screenshot of hextaui-billing-payment-form at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of hextaui-billing-payment-form at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of hextaui-billing-payment-form 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-payment-form
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical1
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal42.8 KB (108.2 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 2m 4s
error during build:
[vite:load-fallback] Could not load <sandbox>/src/lib/utils (imported by src/cut/blocks/billing/billing-payment-form.tsx): ENOENT: no such file or directory, open '<sandbox>/src/lib/utils'

Verdict

A useful scaffold with a responsive layout and practical prop hooks, but not production-ready untouched. It needs a shadcn-style setup to mount, exposes raw card data rather than tokenizing it, and has a critical unsupported ARIA finding to fix before release.

Use it if

  • You need an account settings form that collects a new card and passes the values into your own submission flow.
  • You want optional billing address, save-card, default-card, loading, cancellation, and server-error states exposed as props.
  • Your app already uses shadcn-style primitives, Tailwind theme tokens, and matching path aliases.

Skip it if

  • You require hosted payment fields or browser-side tokenization so raw card details never enter your React state.
  • Your release gate rejects critical accessibility findings until the unsupported ARIA attribute is corrected.
  • You want a drop-in form for a plain React project without importing the surrounding component system and utility setup.
  • You need built-in card validation, payment-provider integration, or submission handling rather than a callback-only shell.

Install

Installation record for hextaui-billing-payment-form
Declared dependencies@radix-ui/react-slot, @radix-ui/react-checkbox, @radix-ui/react-label, @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 app, add compatible button, card, checkbox, field, input-group, and separator primitives; install the required Radix packages and Lucide React; configure Tailwind theme tokens and path aliases; provide the cn utility; then replace registry imports if your layout differs. Correct the unsupported ARIA usage before release.

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