# Parts (/themes/sdk/reference/price/parts)

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

## `Price` [#price]

The price a shopper pays, on the visitor's tax basis, filled in per visitor on pages with live prices.

```ts
Price(props: PriceProps): ReactElement | null
```

**Props:** [`PriceProps`](/themes/sdk/reference/price/types#priceprops)

**Example**

```tsx
import { Price } from '@poltura/theme-sdk/price';
import type { Variant } from '@poltura/theme-sdk/product';

export function VariantPrice({ variant }: { variant: Variant }) {
  return <Price price={variant.price} className='text-xl font-semibold' />;
}
```

## `PriceRange` [#pricerange]

The lowest to highest price across a product's variants, or its single price when they agree.

```ts
PriceRange(props: PriceRangeProps): ReactElement | null
```

**Props:** [`PriceRangeProps`](/themes/sdk/reference/price/types#pricerangeprops)

**Example**

```tsx
import { PriceRange } from '@poltura/theme-sdk/price';
import type { Product } from '@poltura/theme-sdk/product';

export function FromPrice({ product }: { product: Product }) {
  return <PriceRange price={product.price} range={product.priceRange} />;
}
```

## `CompareAtPrice` [#compareatprice]

The struck-through price before the markdown; nothing at full price.

```ts
CompareAtPrice(props: PriceProps): ReactElement | null
```

**Props:** [`PriceProps`](/themes/sdk/reference/price/types#priceprops)

**Example**

```tsx
import { CompareAtPrice, Price } from '@poltura/theme-sdk/price';
import type { PriceView } from '@poltura/theme-sdk/price';

export function SalePrice({ price }: { price: PriceView }) {
  return (
    <p>
      <Price price={price} /> <CompareAtPrice price={price} className='line-through' />
    </p>
  );
}
```

## `DiscountBadge` [#discountbadge]

The markdown as a percentage label such as `-20%`; nothing at full price.

```ts
DiscountBadge(props: PriceProps): ReactElement | null
```

**Props:** [`PriceProps`](/themes/sdk/reference/price/types#priceprops)

**Example**

```tsx
import { DiscountBadge } from '@poltura/theme-sdk/price';
import type { PriceView } from '@poltura/theme-sdk/price';

export function SaleTag({ price }: { price: PriceView }) {
  return <DiscountBadge price={price} className='rounded bg-red-600 px-1 text-white' />;
}
```

## `UnitPrice` [#unitprice]

The price per base measure, such as "12 900 Ft / kg", the EU unit price rule asks for.

```ts
UnitPrice(props: PriceProps): ReactElement | null
```

**Props:** [`PriceProps`](/themes/sdk/reference/price/types#priceprops)

**Example**

```tsx
import { UnitPrice } from '@poltura/theme-sdk/price';
import type { Variant } from '@poltura/theme-sdk/product';

export function PerKilo({ variant }: { variant: Variant }) {
  return <UnitPrice price={variant.price} className='text-xs text-muted-foreground' />;
}
```

## `TaxNote` [#taxnote]

"+ VAT" or "net" beside prices for a visitor who sees net prices; nothing on gross.

```ts
TaxNote(props: PriceNoteProps): ReactElement | null
```

**Props:** [`PriceNoteProps`](/themes/sdk/reference/price/types#pricenoteprops)

**Example**

```tsx
import { Price, TaxNote } from '@poltura/theme-sdk/price';
import type { PriceView } from '@poltura/theme-sdk/price';

export function NetPrice({ price }: { price: PriceView }) {
  return (
    <p>
      <Price price={price} /> <TaxNote className='text-xs' />
    </p>
  );
}
```

## `PriceGate` [#pricegate]

The sign-in or apply link shown instead of prices to visitors the store hides them from.

```ts
PriceGate(props: PriceNoteProps): ReactElement | null
```

**Props:** [`PriceNoteProps`](/themes/sdk/reference/price/types#pricenoteprops)

**Example**

```tsx
import { PriceGate } from '@poltura/theme-sdk/price';

export function HiddenPrice() {
  return <PriceGate className='underline' />;
}
```