vibecodng.com

Free MCP betaIndex and tools live

Measured entry

hextaui-settings-api-keys

formminimal-flat

A client-side React card for listing and creating API keys, choosing scopes and expiry, revealing or copying secrets, and confirming regeneration or revocation. It ships as a shadcn registry component and depends on Lucide icons, Radix-backed UI pieces, Tailwind theme classes, path aliases, and a cn utility.

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

Verdict

A solid starting point for a conventional API-key settings screen, with useful lifecycle callbacks and careful destructive confirmation. It needs a shadcn-style setup, and teams should revise secret visibility and mutation error handling before production use.

Use it if

  • You need a settings panel that covers the common API-key lifecycle behind application-owned callbacks.
  • Your product already uses shadcn conventions and can supply key records, permissions, expiry data, and async mutations.
  • You want a responsive empty state plus dialogs and confirmation flows without introducing a form library.

Skip it if

  • Your security model reveals a secret only at creation and never keeps retrievable key values.
  • You need permissions loaded from the server rather than the fixed read, write, and admin scope choices.
  • You need mutation failures for revoke or regenerate surfaced to users; those callbacks currently clear loading state without showing an error.
  • You want a portable standalone component with no shadcn registry or Tailwind theme setup.

Install

Installation record for hextaui-settings-api-keys
Declared dependencies@radix-ui/react-alert-dialog, @radix-ui/react-slot, @radix-ui/react-checkbox, @radix-ui/react-dialog, @radix-ui/react-label, @radix-ui/react-separator, @radix-ui/react-select
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 the referenced Radix primitives and Lucide icons, install or recreate the registry UI components, provide Tailwind theme tokens and utility classes, add the cn helper, and replace the registry path aliases with local imports. Wire the create, revoke, and regenerate callbacks to your backend.

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.