vibecodng.com

Free MCP betaIndex and tools live

Measured entry

originui-comp-101

switchminimal-flat

A client-side bookmark toggle that pairs a controlled React pressed state with a tooltip whose label changes between adding and removing a bookmark. It ships as a shadcn registry component and composes local Toggle and Tooltip primitives, with Tailwind classes, Lucide React, Radix UI, clsx, and tailwind-merge in the dependency chain.

Specimen
Harness screenshot of originui-comp-101 at 375 pixels wide
Harness screenshot at 375 pixels wide. This viewport scrolled sideways.
Harness screenshot of originui-comp-101 at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of originui-comp-101 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-101
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowflagged at 375
Axe critical0
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal49.9 KB (115.4 KB build, 65.5 KB baseline)
Bare modeFAIL
Provider requiredNO
Demo usedwritten from the component source API

What the harness recorded

BARE BUILD

✗ Build failed in 774ms
error during build:
[vite]: Rollup failed to resolve import "lucide-react" from "<sandbox>re-cd587e276dfd/src/cut/components/ui/comp-101.tsx".

Verdict

A sound, accessible starting point that builds and mounts without provider setup, but it is more composition than feature: persistence is left to the host app, the dependency cost is notable for one control, and the narrow preview needs checking before release.

Use it if

  • You need a compact bookmark or save action with an explicit hover and focus hint.
  • Your app already uses shadcn-style Toggle and Tooltip primitives and Tailwind utilities.
  • You want the pressed state controlled locally and easy to replace with persisted application state.

Skip it if

  • You need bookmarking to persist immediately, because this component only keeps state in memory.
  • Your interface must avoid narrow-screen overflow without additional layout validation; the supplied preview overflowed at the narrowest tested viewport.
  • You want a dependency-light icon button and do not otherwise use the Radix-based toggle and tooltip stack.

Install

Installation record for originui-comp-101
Declared dependenciesradix-ui, clsx, tailwind-merge
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 React and Lucide React, install Radix UI with clsx and tailwind-merge, provide compatible Toggle and Tooltip wrappers, configure Tailwind utilities and the import alias, then connect the pressed state to real bookmark storage if persistence is required.

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

Alternatives

Other published entries for the switch pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.