> ## 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 rules compare

Use this component to render a comparison of rules available and their point values for each tier. If a rule isn't available for a certain tier, it renders an empty cell.

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 rule values in tier-0:

```
.lion-tier-rules-compare__row-cell--tier-0 .lion-tier-rules-compare__rule-value
```

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

```
.lion-tier-rules-compare__row-cell--current
```

## Code

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

## Preview

<Frame>
  <img src="https://mintcdn.com/loyaltylion/mzpO03HW8a1K958n/images/sdk/tier-rules-compare.png?fit=max&auto=format&n=mzpO03HW8a1K958n&q=85&s=04c444cc8775d7feadd562fee825d4a3" alt="Tier rules compare" width="874" height="518" data-path="images/sdk/tier-rules-compare.png" />
</Frame>