vibecodng.com

Free MCP betaIndex and tools live

Measured entry

hextaui-settings-export-data

selectminimal-flat

A client-side React settings card for choosing an export format, selecting data categories, optionally limiting dates, and showing export history with status, progress, and download actions. It ships as a shadcn registry block and depends on local shadcn UI primitives, a class-name utility, Lucide icons, and Radix-backed controls.

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

Verdict

A useful starting point for a real export settings flow, with sensible states and responsive layout. It builds and mounts in the prepared harness, but it needs a shadcn-style setup and an accessibility fix before production use.

Use it if

  • You need a ready-made account data export screen with category and date-range controls.
  • Your application can supply asynchronous export and download callbacks while the component handles interaction state.
  • Your design system already follows shadcn conventions and can absorb the included UI primitives.

Skip it if

  • You need a standalone package that works without shadcn-style aliases, utilities, and theme tokens.
  • You cannot remediate the known critical unsupported ARIA attribute before release.
  • You need the component to create files or manage export jobs without application-side backend logic.
  • You only need a compact format selector rather than a full settings and history card.

Install

Installation record for hextaui-settings-export-data
Declared dependencies@radix-ui/react-slot, @radix-ui/react-checkbox, @radix-ui/react-label, @radix-ui/react-separator, @radix-ui/react-progress, @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 class-name utility and matching import aliases, bring in the referenced badge, button, card, checkbox, field, input-group, progress, select, and separator primitives, then install their Radix packages and Lucide React. Recreate the expected Tailwind theme tokens and correct the unsupported ARIA attribute.

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