How do I install the Variant Picker component?

Install the free SDK with `bun add @otfdashkit/ui` (or npm/pnpm) and import { VariantPicker }. Copy-paste distribution is also supported.

Is the Variant Picker component free to use?

Yes. Variant Picker ships in @otfdashkit/ui, part of the free MIT-licensed OTF SDK on npm — use it in personal and commercial projects.

Which platform does this Variant Picker page cover?

This page documents the web version (@otfdashkit/ui); the OTF SDK keeps the same component API across its web and native packages where a counterpart exists.

Free

220+ open-source components for web + native — plus 5 full-stack kits & 15 landing templates

Browse the SDK

OTF Kit

Star

Variant Picker

Input

Single-select product-option swatches (grind, size, color) with selected + out-of-stock states.

View in Storybook

Loading Storybook preview…

Installation

$bun add @otfdashkit/ui

Import

import { VariantPicker } from '@otfdashkit/ui'