Measured entry
tailark-veil-stats-4
A static stats section shipped as a shadcn registry block, pairing an editorial metric column with a masked globe photograph. It imports Next.js Image and relies on Tailwind theme tokens, container-query variants, masking, and blend-mode utilities, with no separately declared component packages.
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.
| Build | OK |
|---|---|
| Mount | OK |
| Console errors | 1 |
| Uncaught page errors | 0 |
| Horizontal overflow | flagged at 768, 1440 |
| Axe critical | 0 |
| Axe serious | 0 |
| Axe moderate | 0 |
| Axe minor | 0 |
| Gzip marginal | 24.4 KB (89.8 KB build, 65.4 KB baseline) |
| Bare mode | OK |
| Provider required | NO |
| Demo used | written from the component source API |
What the harness recorded
CONSOLE
Failed to load resource: the server responded with a status of 404 (Not Found)
BARE BUILD
Failed to load resource: the server responded with a status of 404 (Not Found)
Verdict
The typography and metric hierarchy are clear, and the block builds, mounts, and passes the automated accessibility scan. The oversized masked globe causes horizontal overflow at wider layouts, while its remote asset failed to load in the harness. Use it after fixing image delivery and clipping the decoration.
Use it if
- You need a compact trust or scale statement with a short list of headline metrics.
- Your page can accommodate an oversized decorative image extending beyond the content column.
- Your stack already supports Next.js images and the Tailwind utilities used by the block.
Skip it if
- You need strict horizontal containment at tablet and desktop widths without modifying the layout.
- You cannot depend on a remote photograph or do not want to replace and self-host the failed image asset.
- You need interactive, reusable, or data-bound stat items rather than fixed markup.
- Your project does not use Next.js or Tailwind and you want a drop-in component without adaptation.
Install
| Declared dependencies | none declared |
|---|---|
| Missing on install | none |
| Bare install | builds and mounts without the shadcn-style helpers |
| Provider | no provider required in the harness |
Add Tailwind CSS with background, foreground, muted foreground, and primary theme tokens, plus support for the container-query and mask utilities used here. Add Next.js image support and allow the remote image host, or replace Next.js Image and self-host the asset.
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/tailark/blocksAlternatives
Other published entries for the stats pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.
- hyperui-stats-1unclassified
- Renders
- YES
- A11y
- 0
- Gzip
- 3.4KB
- Bare
- pass
- Prov
- NO
- hyperui-app-stats-4editorial
- Renders
- YES
- A11y
- 0
- Gzip
- 17.5KB
- Bare
- pass
- Prov
- NO
- tailark-mist-stats-2minimal-flat
- Renders
- YES
- A11y
- 0
- Gzip
- 17.6KB
- Bare
- pass
- Prov
- NO
- tailark-mist-stats-4minimal-flat
- Renders
- YES
- A11y
- 0
- Gzip
- 17.6KB
- Bare
- pass
- Prov
- NO
- tailark-veil-stats-1minimal-flat
- Renders
- YES
- A11y
- 0
- Gzip
- 17.6KB
- Bare
- pass
- Prov
- NO
- hyperui-stats-2editorial
- Renders
- YES
- A11y
- 0
- Gzip
- 17.8KB
- Bare
- pass
- Prov
- NO