# Defaults: CurrencySwitcher (/themes/sdk/reference/chrome/defaults-2)

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

## `CurrencySwitcher` [#currencyswitcher]

The currency switcher on its own, drawn only when the storefront offers more than one currency.

```ts
CurrencySwitcher(props: CurrencySwitcherProps): ReactElement | null
```

[`LocaleSwitcher`](/themes/sdk/reference/chrome/defaults-1#localeswitcher) already offers the currencies; draw this beside a `LocaleSwitcher` with `currency={false}`.

**Props:** [`CurrencySwitcherProps`](/themes/sdk/reference/chrome/types#currencyswitcherprops)

<Tab value='Example'>

```tsx
import { CurrencySwitcher, LocaleSwitcher } from '@poltura/theme-sdk/chrome';

export function MarketControls() {
  return (
    <div className='flex items-center gap-2'>
      <LocaleSwitcher label='flag' currency={false} />
      <CurrencySwitcher label='symbol' />
    </div>
  );
}
```

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

```tsx title="source/currency-switcher.tsx"
import type { ReactElement } from 'react';
import { ChevronDown } from 'lucide-react';
import { useCurrencySwitcher, type CurrencySwitcherProps } from '@poltura/theme-sdk/chrome';
import { useIsEditing } from '@poltura/theme-sdk/editor';
import { useTranslations } from '@poltura/theme-sdk/i18n';
import type { CurrencyCode } from '@poltura/theme-sdk/store';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  cn,
} from '@poltura/theme-sdk/ui';

export function CurrencySwitcher({
  display = 'dropdown',
  label = 'code',
  className,
  attrs,
}: CurrencySwitcherProps): ReactElement | null {
  const { current, available, switchTo, symbolOf } = useCurrencySwitcher();
  const editing = useIsEditing();
  const t = useTranslations('elements.atoms');
  if (available.length < 2 && !editing) return null;
  const options = available.length < 2 ? [current] : available;
  const nameOf = (currency: CurrencyCode): string =>
    label === 'symbol' ? symbolOf(currency) : currency;
  if (display === 'inline') {
    return (
      <nav
        {...attrs}
        aria-label={t('currency')}
        className={cn(attrs?.className, className, 'flex flex-wrap items-center gap-3 text-sm')}
      >
        {options.map((option) => (
          <button
            key={option}
            type='button'
            aria-pressed={option === current}
            aria-label={label === 'symbol' ? option : undefined}
            onClick={() => switchTo(option)}
            className={cn(
              'transition-colors hover:text-foreground',
              option === current ? 'font-semibold text-foreground' : 'text-muted-foreground',
            )}
          >
            {nameOf(option)}
          </button>
        ))}
      </nav>
    );
  }
  return (
    <div
      {...attrs}
      className={cn(attrs?.className, className, 'inline-flex text-sm font-medium text-foreground')}
    >
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <button
            type='button'
            aria-label={t('currency')}
            className='inline-flex items-center gap-1.5 rounded-md px-2 py-1.5 transition-colors hover:bg-muted'
          >
            {nameOf(current)}
            <ChevronDown aria-hidden='true' className='size-3.5' />
          </button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align='end'>
          {options.map((option) => (
            <DropdownMenuItem key={option} onSelect={() => switchTo(option)}>
              {nameOf(option)}
              {label === 'symbol' ? null : (
                <span className='text-muted-foreground'>{symbolOf(option)}</span>
              )}
            </DropdownMenuItem>
          ))}
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}
```

</Tab>


**See also:** [`useCurrencySwitcher`](/themes/sdk/reference/chrome/hooks#usecurrencyswitcher)