# Commerce Variant Picker

Variant picker for technical apparel and footwear with a color, size and fabric matrix.

- id: `commerce-variant-picker`
- Page: https://agentic-ui-kit.com/components/commerce-variant-picker
- Live preview: https://agentic-ui-kit.com/live/component/commerce-variant-picker

## Install

```bash
agentic-ui add commerce-variant-picker
npx shadcn@4.17.0 add @agentic-ui/commerce-variant-picker
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** multi-attribute-selection, cross-availability-matrix, real-time-stock-status, sku-resolution, price-modifier-calculation, quantity-stepper, backorder-waitlist-notification, size-guide-modal, full-matrix-inspection, keyboard-navigation
- **Intents:** configure, explore-detail, create-edit
- **Suits domains:** ecommerce, logistics, saas, marketing
- **Interaction:** keyboard-navigation, variant-switching, cross-availability-filtering, size-guide-modal, matrix-inspection
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** variant picker for technical apparel and footwear with a color, size and fabric matrix, configurator for physical products with complex stock and finish combinations, hardware or merchandise selection panel in an omnichannel retail checkout, sports equipment picker with a size chart and restock alert
- **Avoid when:** selecting a single simple value with no cross dependencies (use a simple select or radio-group), digital products with no inventory or physical dimensions (use pricing-table or plan-comparison)
- **Preserve when adapting:** cross-availability-engine, radiogroup-semantics, price-delta-calculation, keyboard-navigation
- **Replace when adapting:** product-attributes, color-swatches, pricing-rules, currency-locale
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, card, dialog, input, separator, tooltip
- **npm dependencies (registry):** lucide-react@0.577.0