Measured entry
originui-comp-94
A compact pill-shaped profile button with a circular avatar and fixed handle. It ships through a shadcn registry and composes the shared Button primitive, so it depends on Tailwind styling, the project class-merging helper, class-variance-authority, and Radix UI. The sample also expects a local avatar asset.



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 | clean at 375, 768, 1440 |
| Axe critical | 0 |
| Axe serious | 0 |
| Axe moderate | 0 |
| Axe minor | 0 |
| Gzip marginal | 28.3 KB (93.7 KB build, 65.4 KB baseline) |
| Bare mode | FAIL |
| 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
✗ Build failed in 7.49s error during build: [vite:load-fallback] Could not load <sandbox>/src/lib/utils (imported by src/components/ui/button.tsx): ENOENT: no such file or directory, open '<sandbox>/src/lib/utils'
Verdict
A tidy account trigger once adapted, with clean responsive behavior and no detected accessibility violations. It needs a shadcn-style setup to build, and the supplied avatar path is absent in the demo, producing a broken thumbnail. Replace the asset and hardcoded identity before shipping.
Use it if
- You need a compact account trigger for a menu, profile switcher, or signed-in user control.
- Your app already uses the shadcn component layout and Tailwind theme tokens.
- You are prepared to replace the fixed handle and avatar path with real user data.
Skip it if
- The user identity should navigate directly to a profile page, where a link is the more accurate element.
- You need a drop-in component for a project without Tailwind or shadcn conventions.
- You need built-in avatar loading states, initials, or an image failure fallback.
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, add Tailwind with the expected theme tokens, class-variance-authority, Radix UI, a class-merging helper, and matching import aliases. Copy or adapt the shared Button primitive, then provide the avatar asset or change the image source.
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 button pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.
- neu-buttonneumorphism
- Renders
- YES
- A11y
- 0
- Gzip
- 17.8KB
- Bare
- pass
- Prov
- NO
- clay-buttonclaymorphism
- Renders
- YES
- A11y
- 0
- Gzip
- 18.2KB
- Bare
- pass
- Prov
- NO
- tripled-animated-radio-shadcnuiminimal-flat
- Renders
- YES
- A11y
- 0
- Gzip
- 58.2KB
- Bare
- pass
- Prov
- NO
- ruixen-glow-link-buttonliquid-glass
- Renders
- YES
- A11y
- 0
- Gzip
- 58.9KB
- Bare
- pass
- Prov
- NO
- tripled-mood-gradient-button-shadcnuigradient-glow
- Renders
- YES
- A11y
- 0
- Gzip
- 59.2KB
- Bare
- pass
- Prov
- NO
- ruixen-glass-ai-cardliquid-glass
- Renders
- YES
- A11y
- 0
- Gzip
- 59.5KB
- Bare
- pass
- Prov
- NO