vibecodng.com

Free MCP betaIndex and tools live

Measured entry

originui-comp-107

tabsminimal-flat

A controlled React client component for choosing text alignment from a compact icon toolbar. It ships through the Origin UI registry and composes its toggle-group primitive with local state, Lucide icons, Radix UI behavior, Tailwind theme classes, shared toggle variants, and a class-name utility.

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

Verdict

A focused, dependable choice for an editor toolbar when the surrounding design system already matches it. The packaged version builds and mounts cleanly, but the bare version does not: it needs a shadcn-style setup and its shared utility modules before it can compile.

Use it if

  • You need a compact, mutually exclusive alignment control for an editor or formatting panel.
  • Your app already uses shadcn conventions, Tailwind theme tokens, and Radix-backed controls.
  • You want labeled icon buttons with selection state and keyboard behavior supplied by a tested primitive.

Skip it if

  • Users must be able to clear the selection, because this demo keeps the last chosen alignment active.
  • Your interface needs visible text labels rather than icon-only alignment actions.
  • Your project does not use Tailwind or shadcn-style utilities and you do not want to recreate its styling layer.

Install

Installation record for originui-comp-107
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, Lucide React, class-variance-authority, the shared class-name helper, the toggle variant module, Tailwind processing, compatible theme tokens, and matching import aliases. Replace the registry-prefixed imports with local 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 tabs pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.