Measured entry
originui-comp-98
A client-side React icon button that toggles local open state, exposes that state with aria-expanded, and rotates a Lucide plus into a close mark. It ships as a shadcn registry component and composes the registry's Button primitive, Tailwind state variants, React, and Lucide React; the button primitive brings the declared Radix and class-merging utilities.



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 | 0 |
| Uncaught page errors | 0 |
| Horizontal overflow | flagged at 375 |
| Axe critical | 0 |
| Axe serious | 0 |
| Axe moderate | 0 |
| Axe minor | 0 |
| Gzip marginal | 32.2 KB (97.7 KB build, 65.5 KB baseline) |
| Bare mode | FAIL |
| Provider required | NO |
| Demo used | written from the component source API |
What the harness recorded
BARE BUILD
✗ Build failed in 1.21s error during build: [vite]: Rollup failed to resolve import "lucide-react" from "<sandbox>re-4f20a97a84dd/src/cut/components/ui/comp-98.tsx".
Verdict
A sound, focused toggle with sensible accessible naming and no provider requirement. Use it as a visual control inside a larger menu or disclosure implementation, but wire the controlled content yourself and consider lifting its state when other components need to react.
Use it if
- You need one compact control to toggle a menu, popover, or collapsible region.
- Your interface already uses a Button primitive with outline and icon variants.
- You want the open and closed state announced through an accessible label and aria-expanded.
Skip it if
- The control must be driven by parent state, because this implementation owns its state internally.
- You need the button to open or close content by itself; it only changes its own icon and accessibility state.
- Your project avoids Tailwind state variants or Lucide icons and does not want adapters for them.
Install
| Declared dependencies | radix-ui, clsx, tailwind-merge |
|---|---|
| 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 React and Lucide React, provide a compatible Button primitive with outline and icon variants, and configure Tailwind for group aria-expanded transforms, arbitrary rotation, and the custom easing class. Replace the registry path alias with your local Button import.
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