# Price Components

These components use `useIgPrices()` internally.  See [docs](https://headless.intelligems.io/version-1.0.0-beta/reference/hooks/price-hooks) for details on price-return logic.

## `<IgPrice/>` and `<IgCompareAtPrice/>`

The [`<IgPrice/>`](#less-than-igprice-greater-than) and `<IgCompareAtPrice/>`components are recommended as they will color prices throughout your page while in [Integration Mode](https://headless.intelligems.io/version-1.0.0-beta/reference/components/broken-reference). &#x20;

The `priceFormatter` prop may be used to format the returned price for your site.

```tsx
export interface IgPriceProps {
  className?: string | undefined;
  productId?: string;
  variantId?: string;
  originalPrice: number;
  originalCompareAtPrice?: number;
  currencyCode?: string;
  priceFormatter?: PriceFormatter;
}

export type PriceFormatter = (value: number, currencyCode?: string) => string;
```