> ## Documentation Index
> Fetch the complete documentation index at: https://developers.loyaltylion.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tier benefits compare

Use this component to render a comparison of the benefits available to each tier. These are (by default) be color coded based on the tier's color, but can be overridden using CSS.

Each `td` has a CSS class indicating the tier it is a part of (numbered based on position, from 0). For example, to select the benefit status circles in tier-0:

```
.lion-tier-benefits-compare__row-cell--tier-0 .lion-tier-benefits-compare__benefit-status-circle
```

If a benefit is enabled for a tier, it contains a `--enabled` modifier:

```
.lion-tier-benefits-compare__benefit-status--enabled
```

If customer is logged in, it attaches a `--current` modifier to the tier that customer is currently in:

```
.lion-tier-benefits-compare__benefit-status--current
```

## Code

```html theme={null}
<div data-lion-tier-benefits-compare></div>
```

## Preview

<Frame>
  <img src="https://mintcdn.com/loyaltylion/mzpO03HW8a1K958n/images/sdk/tier-benefits-compare.png?fit=max&auto=format&n=mzpO03HW8a1K958n&q=85&s=881ff219acebe23ca5663e2000a94c70" alt="Tier benefits compare" width="1202" height="372" data-path="images/sdk/tier-benefits-compare.png" />
</Frame>