# Custom tiers

Common, rare, epic and legendary are a default, not a rule. A tier list is an array you pass in. Each tier says how often it comes up and how loud its reveal is, and the theme says what colour it wears.

> Live preview: see it play at https://bettertyped.github.io/react-cards-opening/docs/guides/custom-tiers/
>
> Bronze is quiet, silver is loud, gold gets everything.

## Write the list

`tiers.ts`

```ts
import type { RarityTier } from "@react-cards-opening/core";

export const tiers: RarityTier[] = [
  { id: "bronze", label: "Bronze", weight: 70, effect: "quiet" },
  { id: "silver", label: "Silver", weight: 25, effect: "loud" },
  { id: "gold", label: "Gold", weight: 5, effect: "legendary" },
];
```

## Colour them

```ts
import { themeOf } from "@react-cards-opening/ui";

const base = themeOf("mono", "dark");
export const theme = { ...base, rarity: { bronze: "#d08a5a", silver: "#c3ccd6", gold: "#f2cc60" } };
```

The keys of `rarity` are tier ids. A tier with no entry wears the theme's muted colour, which is a reasonable look for a lowest tier and a visible reminder for a forgotten one.

## Pass both

```tsx
<CardHunt cards={cards} rarities={tiers} theme={theme} {...rest} />

// The same list deals the cards.
const hand = rollCards({ pool, count: 3, rarities: tiers, seed });
```

## Choosing an effect

| Effect | Use it for | Keep in mind |
| --- | --- | --- |
| `quiet` | Most of your cards. | Several tiers can be quiet. They differ by colour and label. |
| `loud` | The tier people hope for. | Rays and a shake. One or two tiers at most. |
| `legendary` | The tier people screenshot. | The full show. If two tiers have it, neither is special. |

## More than three shows

Seven tiers on three effect levels works well: colour does the rest. If you need a show that does not exist, `launch` on [CardOpening](https://bettertyped.github.io/react-cards-opening/docs/components/card-opening/) takes a timeline of your own to play before the card leaves, and it is told the card, so it can do something only for your top tier.

## Related

- [Rarity tiers](https://bettertyped.github.io/react-cards-opening/docs/rarity-tiers/)
- [Rolls and odds](https://bettertyped.github.io/react-cards-opening/docs/core/rolls/)
- [Theming](https://bettertyped.github.io/react-cards-opening/docs/theming/)
- [Show plan](https://bettertyped.github.io/react-cards-opening/docs/core/show-plan/)

Source: https://bettertyped.github.io/react-cards-opening/docs/guides/custom-tiers/