Measured entry
originui-search-26
A labeled search field with leading search and trailing submit icons. It ships as a shadcn registry component, composes local Input and Label primitives, and relies on React, Lucide icons, Radix UI through the label primitive, Tailwind utility classes, theme tokens, and an aliased class-name helper.



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 | 0 |
| Uncaught page errors | 0 |
| Horizontal overflow | clean at 375, 768, 1440 |
| Axe critical | 0 |
| Axe serious | 0 |
| Axe moderate | 0 |
| Axe minor | 0 |
| Gzip marginal | 15.1 KB (79.7 KB build, 64.6 KB baseline) |
| Bare mode | FAIL |
| Provider required | NO |
| Demo used | written from the component source API |
What the harness recorded
BARE BUILD
✗ Build failed in 2.52s error during build: [vite:load-fallback] Could not load <sandbox>/src/lib/utils (imported by src/components/ui/input.tsx): ENOENT: no such file or directory, open '<sandbox>/src/lib/utils'
Verdict
A tidy, accessible starting point for a submit-style search field. It passes the configured build, mount, viewport, and automated accessibility checks, but it needs a shadcn-style setup; a bare React project fails because the Input dependency expects the aliased utility module.
Use it if
- You need a compact search control with an explicit label and a built-in submit action.
- Your app already uses shadcn-style Input and Label primitives with compatible theme tokens.
- You want logical-direction spacing that can adapt to right-to-left layouts.
Skip it if
- You need suggestions, autocomplete, filtering state, or search result behavior rather than a presentational input.
- Your design system does not use Tailwind utilities or shadcn-compatible theme tokens.
- You cannot supply the aliased utility module and local Input and Label primitives expected by the registry files.
Install
| Declared dependencies | radix-ui |
|---|---|
| Missing on install | none |
| Bare install | fails once the shadcn-style helpers are removed, so it needs that setup |
| Provider | no provider required in the harness |
In a non-shadcn project, install Radix UI and Lucide React, add compatible Input and Label primitives, provide the class-name utility, configure or replace the alias imports, and supply Tailwind utilities plus matching theme tokens. Wire the submit button to a form or handler yourself.
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/originuiAlternatives
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.
- clay-inputclaymorphism
- Renders
- YES
- A11y
- 0
- Gzip
- 17.9KB
- Bare
- pass
- Prov
- NO
- neu-search-inputneumorphism
- Renders
- YES
- A11y
- 0
- Gzip
- 18.1KB
- Bare
- pass
- Prov
- NO
- clay-search-inputclaymorphism
- Renders
- YES
- A11y
- 0
- Gzip
- 18.3KB
- Bare
- pass
- Prov
- NO
- originui-comp-33minimal-flat
- Renders
- YES
- A11y
- 0
- Gzip
- 20.7KB
- Bare
- pass
- Prov
- NO
- hextaui-labelminimal-flat
- Renders
- YES
- A11y
- 0
- Gzip
- 31.3KB
- Bare
- pass
- Prov
- NO
- ruixen-circular-stepper-inputliquid-glass
- Renders
- YES
- A11y
- 0
- Gzip
- 61.1KB
- Bare
- pass
- Prov
- NO