# Components

Five ways to open a card, and the pieces they are built from. All of it below is live, in whatever theme you pick: open the pack, spin the wheel.

- [CardPack](https://bettertyped.github.io/react-cards-opening/docs/components/card-pack/): A sealed pack. It bursts, deals face down, and each card turns on a press.
- [CardWheel](https://bettertyped.github.io/react-cards-opening/docs/components/card-wheel/): A prize wheel that spins under a pointer and lands on your card.
- [CardSpin](https://bettertyped.github.io/react-cards-opening/docs/components/card-spin/): A reel that races under a marker and stops on the card that was dealt.
- [CardCase](https://bettertyped.github.io/react-cards-opening/docs/components/card-case/): A case that opens and gives up its cards one after another.
- [CardHunt](https://bettertyped.github.io/react-cards-opening/docs/components/card-hunt/): A grid, a scan that hunts it, and the list of finds.
- [CardOpening](https://bettertyped.github.io/react-cards-opening/docs/components/card-opening/): The reveal over the page. Six tiers, six shows: open each.
- [EffectLayer](https://bettertyped.github.io/react-cards-opening/docs/components/effect-layer/): A place to play any effect, on anything.
- [ScanGrid](https://bettertyped.github.io/react-cards-opening/docs/components/scan-grid/): The grid, and the scan that hunts a cell down.
- [Card](https://bettertyped.github.io/react-cards-opening/docs/components/card/): A card standing still, for a collection or a shop.
- [PixelGlyph](https://bettertyped.github.io/react-cards-opening/docs/components/pixel-glyph/): Pixel art from nine strings of nine.
- [Themes](https://bettertyped.github.io/react-cards-opening/docs/theming/): Ten themes, dark and light, and room for your own.

> Live: see them play at https://bettertyped.github.io/react-cards-opening/docs/components/

## Install

```bash
pnpm add @react-cards-opening/ui @react-cards-opening/core gsap
```

```tsx
import "@react-cards-opening/ui/styles.css";
```

## How they fit

Every opener ends in the same reveal. `CardHunt` is `ScanGrid` and `CardOpening` wired to [useCardOpening](https://bettertyped.github.io/react-cards-opening/docs/core/use-card-opening/); `CardSpin` swaps the grid for a `SpinReel`, `CardWheel` for a `PrizeWheel`, and `CardCase` for a `LootCase`. `CardPack` runs on [useCardPack](https://bettertyped.github.io/react-cards-opening/docs/core/use-card-pack/) and turns its cards where they lie. When the layout is yours (cards in a shop, a daily reward), use `CardOpening` on its own and tell it where a card leaves from and where it lands.

## What they share

- **`theme`**: a [CardTheme](https://bettertyped.github.io/react-cards-opening/docs/theming/). `moss` in the dark when left out.
- **`rarities`**: your [tiers](https://bettertyped.github.io/react-cards-opening/docs/rarity-tiers/). The six defaults when left out.
- **Their own ground rules.** Each resets only the elements it renders, at one class of specificity, so a page's `button` or `p` styles do not reach in and nothing leaks out.
- **Pixels, not rems.** A page with a 10 pixel root font gets the same card as one with 16.
- **`effects`**: what each tier plays on top of its reveal. Six [signature shows](https://bettertyped.github.io/react-cards-opening/docs/effects/plans/) by default, from a [library of dozens](https://bettertyped.github.io/react-cards-opening/docs/effects/library/).
- **`classNames`**: a class of your own for any part, and a stylesheet where every rule weighs one class, so yours wins. [Styling by hand](https://bettertyped.github.io/react-cards-opening/docs/guides/styling/) has the Tailwind setup.

## Related

- [CardOpening](https://bettertyped.github.io/react-cards-opening/docs/components/card-opening/)
- [CardHunt](https://bettertyped.github.io/react-cards-opening/docs/components/card-hunt/)
- [Theming](https://bettertyped.github.io/react-cards-opening/docs/theming/)
- [Core](https://bettertyped.github.io/react-cards-opening/docs/core/)

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