vibecodng.com

Free MCP betaIndex and tools live

Measured entry

originui-comp-160

radio-groupminimal-flat

A React payment-method radio group presented as two selectable cards with inline card-network marks, labels, sublabels, and descriptions. It ships through the Origin UI shadcn registry and composes its Label and RadioGroup wrappers over Radix UI, with React useId, Tailwind utility classes, theme tokens, and a shared cn helper.

Specimen
Harness screenshot of originui-comp-160 at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of originui-comp-160 at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of originui-comp-160 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-160
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal37.8 KB (103.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 3.10s
error during build:
[vite:load-fallback] Could not load <sandbox>/src/lib/utils (imported by src/components/ui/radio-group.tsx): ENOENT: no such file or directory, open '<sandbox>/src/lib/utils'

Verdict

A sound checkout-specific radio-card pattern with clean verified behavior and no reported accessibility or viewport issues. The source is intentionally static and payment-branded, so expect to adapt its options. It needs a shadcn-style setup and does not work as a bare drop-in.

Use it if

  • You need a compact payment-method choice where the whole card should act as the selection target.
  • Your app already uses shadcn conventions, Tailwind theme tokens, and Radix UI primitives.
  • You want labels and supporting descriptions wired to accessible radio controls.

Skip it if

  • You need a generic radio group without payment-brand artwork or checkout-specific presentation.
  • Your design system does not provide the expected Tailwind theme tokens and cn utility.
  • You need options generated from data rather than a small static set embedded in the component.

Install

Installation record for originui-comp-160
Declared dependenciesradix-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 Radix UI and the React client runtime, bring over the Label and RadioGroup wrapper files, provide the shared cn class-merging helper, configure the referenced Tailwind utilities and semantic theme tokens, and replace the registry aliases with local import paths.

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 radio-group pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.