vibecodng.com

Free MCP betaIndex and tools live

Measured entry

originui-number-29

inputunclassified

A client-side currency number field with a label, editable input, and stacked increment and decrement controls. It ships as a shadcn registry component styled with Tailwind utility classes and theme tokens, using React Aria Components for behavior and Lucide for the chevron icons.

Specimen
Harness screenshot of originui-number-29 at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of originui-number-29 at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of originui-number-29 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 originui-number-29
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal31.4 KB (96.0 KB build, 64.6 KB baseline)
Bare modeFAIL
Provider requiredNO
Demo usedwritten from the component source API

What the harness recorded

BARE BUILD

✗ Build failed in 11.91s
error during build:
[vite]: Rollup failed to resolve import "lucide-react" from "<sandbox>re-238c32bcf5f0/src/cut/components/ui/comp-29.tsx".

Verdict

A solid, accessible starting point for a compact currency stepper. It builds and mounts cleanly on its own, but the fixed euro formatting, demo attribution, and styling assumptions make it a component to adapt rather than drop into every form unchanged.

Use it if

  • You need an accessible currency input with keyboard handling and stepper controls already wired up.
  • Your interface already uses Tailwind theme tokens and Lucide icons.
  • You want React Aria NumberField behavior while retaining direct control over the rendered styling.

Skip it if

  • You need a generic quantity field because the example is preset to euro currency formatting.
  • You want a dependency-light native number input without React Aria Components.
  • You cannot accommodate the built-in attribution line or plan to use the component unchanged.
  • Your design system does not use Tailwind utilities or shadcn-style color tokens.

Install

Installation record for originui-number-29
Declared dependenciesreact-aria-components
Missing on installnone
Bare installfails once the shadcn-style helpers are removed, so it needs that setup
Providerno provider required in the harness

Add React Aria Components and Lucide React, configure Tailwind to process the component classes, and define the referenced theme colors, borders, rings, radii, and shadows. Replace the preset currency, initial value, label, and attribution content to suit the product.

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/origin-space/originui
License
MIT
Record published
2026-08-12

Alternatives

Other published entries for the input pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.