vibecodng.com

Free MCP betaIndex and tools live

Measured entry

hextaui-settings-storage

formminimal-flat

A client-side React card for showing total and category storage usage, with confirmation dialogs for category cleanup and emptying trash. It ships as a shadcn registry block and relies on Tailwind styling, a local cn helper, Lucide icons, and shadcn-style card, field, progress, separator, button, and alert-dialog primitives.

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

Verdict

A practical, responsive storage-management shell with sensible confirmation flows, but it needs a shadcn-style setup and accessibility repair before production use. The progress elements currently include unsupported ARIA attributes and lack an accessible name.

Use it if

  • You need a ready-made storage settings panel with overall and per-category usage.
  • Your app can supply storage totals, category icons and colors, and an asynchronous cleanup callback.
  • You want destructive cleanup actions guarded by confirmation dialogs.

Skip it if

  • Your project does not use Tailwind and shadcn-style local UI primitives.
  • You need accessible progress reporting without first correcting the current ARIA issues.
  • You need built-in data fetching, quota enforcement, or cleanup logic rather than a presentational callback shell.
  • You cannot accept a relatively dependency-heavy settings card for this narrow feature.

Install

Installation record for hextaui-settings-storage
Declared dependencies@radix-ui/react-alert-dialog, @radix-ui/react-slot, @radix-ui/react-label, @radix-ui/react-separator, @radix-ui/react-progress
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 Tailwind theme tokens and utilities, the local cn helper, Lucide React, and compatible card, field, progress, separator, button, and Radix-based alert-dialog components. Rewrite the registry import aliases to match your source tree.

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.