Watering can
1 L
KQ-588 · SHOP/CARD
Shop Card
A product card that keeps its second thought below the fold. Hover or focus inside cross-fades the picture to its alternate view and raises the quick-add bar from under the frame on glide, at a height a ResizeObserver measured so nothing reserves space for it; the heart pops on two chained springs, out on flick and back on recoil, and choosing a variant rolls the price. It is an article with a real link for a title, the heart carries aria-pressed, and the variants are a radio group with a roving tabindex, so Tab alone raises the bar.
KQ-588 · SHOP/CARD
Fernworks · Hover or tab a card
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/shop-card
Props
- product
- { id: string; title: string; price: number; variants: { id: string; label: string; price?: number }[]; art: [React.ReactNode, React.ReactNode] }
- default —
- The product and its two views; a variant's own price overrides the product's.
- onAdd
- (variantId: string) => void
- default —
- Fires from the quick-add bar with the chosen variant.
- liked / defaultLiked
- boolean
- default false
- Controlled or initial wishlist state for the heart.
- onLikedChange
- (liked: boolean) => void
- default —
- Fires when the heart toggles.
- href
- string
- default #
- Where the title link goes.
- format
- (value: number) => string
- default (value) => value.toFixed(2)
- Money formatter — the card never invents a currency.
| Prop | Type | Default | Description |
|---|---|---|---|
| product | { id: string; title: string; price: number; variants: { id: string; label: string; price?: number }[]; art: [React.ReactNode, React.ReactNode] } | — | The product and its two views; a variant's own price overrides the product's. |
| onAdd | (variantId: string) => void | — | Fires from the quick-add bar with the chosen variant. |
| liked / defaultLiked | boolean | false | Controlled or initial wishlist state for the heart. |
| onLikedChange | (liked: boolean) => void | — | Fires when the heart toggles. |
| href | string | # | Where the title link goes. |
| format | (value: number) => string | (value) => value.toFixed(2) | Money formatter — the card never invents a currency. |