Measured entry
ruixen-add-to-cart-button
buttonunclassifiedmotion on file
A client-side React add-to-cart control that morphs into quantity controls and recalculates the displayed total. It ships as a shadcn registry component, uses Tailwind utility classes for styling, Motion for spring and presence effects, and local state with an optional quantity callback.
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 | clean at 375, 768, 1440 |
| Axe critical | 0 |
| Axe serious | 0 |
| Axe moderate | 0 |
| Axe minor | 0 |
| Gzip marginal | 60.4 KB (125.8 KB build, 65.4 KB baseline) |
| Bare mode | OK |
| Provider required | NO |
| Demo used | written from the component source API |
Verdict
A polished, focused choice for product cards when local quantity state matches your cart flow. It builds and mounts cleanly without provider setup, but its fixed price formatting and narrow callback contract make it a starting point rather than a complete commerce control.
Use it if
- You want a compact product-card control that combines the initial add action, quantity changes, and a running total.
- Your cart integration can consume a quantity callback while the component owns its visible state.
- Your interface already uses Tailwind utilities and can accept Motion as a runtime dependency.
Skip it if
- You need cart state to be fully controlled by a server, store, or parent component.
- You need locale-aware currency formatting rather than a prefixed currency string and fixed decimal formatting.
- You need built-in loading, stock, error, disabled, or checkout states.
- You are minimizing client-side animation dependencies for a simple commerce action.
Install
| Declared dependencies | motion |
|---|---|
| Missing on install | none |
| Bare install | builds and mounts without the shadcn-style helpers |
| Provider | no provider required in the harness |
In a non-shadcn React project, add Motion, configure Tailwind so the component file is scanned, preserve the client-component directive where required, and place the file in your own component structure. Wire the quantity callback into the real cart and add any loading, stock, or error handling your flow needs.
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/ruixenui/ruixen.comAlternatives
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