vibecodng.com

Free MCP betaIndex and tools live

Measured entry

originui-comp-122

buttonminimal-flat

A vertical set of branded sign-in buttons for Google, X, Facebook, and GitHub. It ships as a React registry component styled with Tailwind utilities and composes Origin UI's Button, which relies on Radix Slot, class-variance-authority, and a local cn helper. Brand marks come from Remix Icon.

Specimen
Harness screenshot of originui-comp-122 at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of originui-comp-122 at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of originui-comp-122 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-comp-122
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious1
Axe moderate0
Axe minor0
Gzip marginal29.8 KB (95.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 6.16s
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 practical starting point for a conventional social-login stack, but it is presentation only and its contrast needs correction before release. It builds and mounts in the prepared harness, while a bare project fails because it needs a shadcn-style setup and local utility wiring.

Use it if

  • You need a ready-made visual starting point for several social sign-in providers.
  • Your app already uses Tailwind and a shadcn-style component registry.
  • You will connect each button to your own authentication flow and loading states.

Skip it if

  • You need a complete social authentication flow rather than presentation-only buttons.
  • Your project does not use Tailwind utilities or shadcn-style aliases and helpers.
  • You cannot revise the brand color treatments that currently fail minimum contrast checks.
  • You want to avoid adding an icon package and the shared button dependencies.

Install

Installation record for originui-comp-122
Declared dependencies@remixicon/react, radix-ui
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 Remix Icon, Radix UI, class-variance-authority, Tailwind, the shared Button component, and a cn class-merging helper. Configure the import alias or replace aliased imports, provide the expected theme tokens, and wire each button to an authentication action.

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-13

Alternatives

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.