# Examples

Each example is a whole component, running on this page and printed in full under it. They use only what the two packages export, so anything here can be pasted into an app that has them installed. Start with the one closest to what you are building and change it.

- [Card hunt](https://bettertyped.github.io/react-cards-opening/docs/examples/card-hunt/): The whole hunt: a grid, a scan, five cards, the finds.
- [Open from a button](https://bettertyped.github.io/react-cards-opening/docs/examples/open-from-a-button/): One button, one card, the smallest thing that works.
- [Collection](https://bettertyped.github.io/react-cards-opening/docs/examples/collection/): Cards face down on a shelf that open where they lie.

## The cards they deal

Every example deals from the same made-up set of ten creatures, drawn with the [pixel glyphs](https://bettertyped.github.io/react-cards-opening/docs/components/pixel-glyph/) that ship with the library. Swap in your own cards: a card is an `id`, a `rarity`, and whatever your face needs.

`cards.ts`

```ts
import { GLYPHS, type GlyphCard } from "@react-cards-opening/ui";

export const cards: GlyphCard[] = [
  { id: "moss-hedgehog", rarity: "common", name: "Moss Hedgehog", line: "Rolls into a ball at the first sign of a meeting.", art: GLYPHS.hedgehog },
  { id: "lantern-fox", rarity: "rare", name: "Lantern Fox", line: "Knows a shortcut. Will not say where it comes out.", art: GLYPHS.fox },
  { id: "ember-cat", rarity: "epic", name: "Ember Cat", line: "Sleeps on warm machines and wakes up when they fail.", art: GLYPHS.cat },
  { id: "tide-octopus", rarity: "rare", name: "Tide Octopus", line: "Eight arms, and one of them is always on the keyboard.", art: GLYPHS.octopus },
  { id: "vault-dragon", rarity: "legendary", name: "Vault Dragon", line: "Keeps one of every card ever dealt. This one is its own.", art: GLYPHS.dragon },
];
```

## Related

- [Card hunt example](https://bettertyped.github.io/react-cards-opening/docs/examples/card-hunt/)
- [Collection example](https://bettertyped.github.io/react-cards-opening/docs/examples/collection/)
- [Your first opening](https://bettertyped.github.io/react-cards-opening/docs/first-opening/)
- [Components](https://bettertyped.github.io/react-cards-opening/docs/components/)

Source: https://bettertyped.github.io/react-cards-opening/docs/examples/