# Defaults: VariantPicker to BundleSelector (/themes/sdk/reference/product/defaults-1)

```ts
import { … } from '@poltura/theme-sdk/product';
```

## `VariantPicker` [#variantpicker]

The complete variant picker of the nearest product, built from its parts.

```ts
VariantPicker(props: VariantPickerProps): ReactElement | null
```

**Props:** [`VariantPickerProps`](/themes/sdk/reference/product/types-3#variantpickerprops)

<Tab value='Example'>

```tsx
import { VariantPicker } from '@poltura/theme-sdk/product';

export function BuyColumn() {
  return <VariantPicker display='auto' />;
}
```

</Tab>
<Tab value='Source'>

```tsx title="source/variant-picker.tsx"
import type { ReactElement } from 'react';
import {
  ProductTableLink,
  VariantOption,
  VariantOptionValue,
  useProductTableLinks,
  useVariantPicker,
  type ProductTable,
  type VariantPickerProps,
  type VariantPickerState,
} from '@poltura/theme-sdk/product';
import { cn } from '@poltura/theme-sdk/ui';

const BOX =
  'rounded-xl border border-border/50 bg-card/70 lg:bg-card/50 backdrop-blur-md lg:backdrop-blur-xl p-4 sm:p-5 space-y-4';

function TableLinks({ tables }: { tables: readonly ProductTable[] }): ReactElement | null {
  if (tables.length === 0) return null;
  return (
    <div className='flex flex-wrap gap-x-4 gap-y-2'>
      {tables.map((table) => (
        <ProductTableLink key={table.id} table={table} />
      ))}
    </div>
  );
}

/** The picker over a choice the caller holds, such as a quick-buy dialog's own. */
export function VariantPickerView({
  state,
  display = 'auto',
  showTitles = true,
  boxed = false,
  classes,
  className,
}: VariantPickerProps & { state: VariantPickerState }): ReactElement | null {
  const links = useProductTableLinks();
  if (state.options.length === 0) {
    return links.standalone.length === 0 ? null : (
      <div className={className}>
        <TableLinks tables={links.standalone} />
      </div>
    );
  }
  return (
    <div className={cn(boxed ? BOX : 'space-y-4', className)}>
      {state.options.map((option) => {
        const optionTables = links.byOption[option.id] ?? [];
        return (
          <VariantOption
            key={option.id}
            option={option}
            display={display === 'dropdown' ? 'dropdown' : option.display}
            showTitle={showTitles}
            titleSlot={
              optionTables.length === 0
                ? undefined
                : optionTables.map((table) => <ProductTableLink key={table.id} table={table} />)
            }
            classes={classes}
          >
            {option.values.map((value) => (
              <VariantOptionValue
                key={value.id}
                value={value}
                onSelect={() => state.select(option.id, value.id)}
                className={classes?.value}
              />
            ))}
          </VariantOption>
        );
      })}
      <TableLinks tables={links.standalone} />
    </div>
  );
}

export function VariantPicker(props: VariantPickerProps): ReactElement | null {
  return <VariantPickerView {...props} state={useVariantPicker()} />;
}
```

</Tab>


**See also:** [`useVariantPicker`](/themes/sdk/reference/product/hooks-1#usevariantpicker), [`VariantOption`](/themes/sdk/reference/product/parts-1#variantoption), [`VariantOptionValue`](/themes/sdk/reference/product/parts-1#variantoptionvalue), [`VariantSwatch`](/themes/sdk/reference/product/parts-1#variantswatch)

## `BundleSelector` [#bundleselector]

The complete bundle offer of the product page: its items, groups, suggested sets and savings.

```ts
BundleSelector(props: BundleSelectorProps): ReactElement | null
```

Place one with `placement='below'` under the product's columns too: a wide bundle draws there, and the buy box scrolls to it.

**Props:** [`BundleSelectorProps`](/themes/sdk/reference/product/types-4#bundleselectorprops)

**Example**

```tsx
import { BundleSelector } from '@poltura/theme-sdk/product';

export function Offer() {
  return <BundleSelector className='mt-4' />;
}

export function WideOffer() {
  return <BundleSelector placement='below' />;
}
```

**See also:** [`useBundleSelection`](/themes/sdk/reference/product/hooks-1#usebundleselection)