Skip to content

E-Commerce

Variant Swatch Picker

Colour swatch and size button picker with per-combination availability so unavailable sizes show struck-through instead of disappearing.

SubscriptionIncluded with the Velocity Components subscription.
$velocityx add variant-swatch-picker
Props & docs

Needs a licence key — subscribe here, then velocityx loginonce.

AstroReactTailwind CSSNew

Variant Swatch Picker

Variant Swatch Picker

Live preview of the Variant Swatch Picker component

Colour — Black

Size — US 9

The code ships with Velocity.

Every component's full source — copy-paste ready, yours to edit — comes with any Velocity package. Buy once, own the code forever.

Get Velocity X — from $1,250 See all packages →

Using the Variant Swatch Picker component

Every Velocity component is plain Astro or React markup styled with Tailwind utility classes. There is no proprietary runtime and no design-system wrapper to adopt — the component inherits whatever colour and type tokens your project already defines.

Read the component docs All 589 components

More E-Commerce components

Browse all →

Write a Review Form

Interactive star-rating picker with title and body fields, native validation, and a success confirmation state.

Wishlist/Save Button

Heart toggle with a pop animation on save, in an icon-only or labelled-pill variant.

Recently Viewed Row

Horizontally scrolling rail of small product tiles using native scroll-snap, no carousel library.

Category Tile Grid

Responsive image-and-label tile grid linking into catalogue categories, with an optional item count.

Free Shipping Progress Bar

Animated fill bar showing amount remaining to a free-shipping threshold, swapping to a success message once met.

Subscription Plan Switcher

Accessible plan selection for an existing subscription, showing the current plan and collecting explicit confirmation. Billing and proration remain in the host app.