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

# Components

> Drop-in React components for Flynet — auth, member context, and discovery, built on the SDK.

# Components

`@flynetdev/react` is a library of drop-in React components built on
[`@flynetdev/core`](/concepts/typescript-client). Each one wires a Flynet
surface — auth, profile, wallets, check-ins, discovery — to a themeable,
accessible UI, so you don't rebuild the same screens every time.

```bash theme={null}
npm install @flynetdev/react @flynetdev/core @tanstack/react-query
```

Import the theme once at your app root, then drop components in. New here? Start
with [Get started](/components/get-started).

```tsx theme={null}
import "@flynetdev/react/styles.css";
```

## How they work

* **Member components** read from a `FlynetProvider`. Give it a
  `FlynetMemberClient` (built from a member's OAuth token) and they fetch
  client-side.
* **Discovery components** are presentational: fetch on the server with your API
  key and pass the result as props. The key never reaches the browser.
* Loading and error states are handled for you, and everything themes through
  CSS variables you can override.

## Auth

| Component              | What it does                                                                                        |
| ---------------------- | --------------------------------------------------------------------------------------------------- |
| `ConnectWithBlackbird` | The sign-in button that starts the OAuth flow. A link to your authorize route — no provider needed. |

## Member components

Wrap these in a `FlynetProvider` with a `FlynetMemberClient`.

| Component      | Shows                                      | Scope                     |
| -------------- | ------------------------------------------ | ------------------------- |
| `WalletBadge`  | A member's FLY and USD balance             | `read:wallets`            |
| `UserPassport` | A member's profile, level, and progress    | `read:profile`            |
| `CheckInFeed`  | A member's recent check-ins                | `read:user_checkins`      |
| `RecentVisits` | Recent (anonymized) check-ins at one venue | `read:checkins` (API key) |

## Discovery components

Presentational — pass data you fetched server-side with your API key.

| Component         | Shows                        |
| ----------------- | ---------------------------- |
| `RestaurantList`  | A list of restaurants        |
| `RestaurantCard`  | A single restaurant          |
| `LocationCard`    | A single location            |
| `OpenHoursBadge`  | A location's open hours      |
| `NearbyLocations` | Locations sorted by distance |

## Hooks

Want the data without the UI? The same fetching is exposed as hooks that read
from the `FlynetProvider`: `useWallet`, `useCheckIns`, `usePassport`,
`useVenueCheckIns`.

## Next

<CardGroup cols={2}>
  <Card title="Get started" icon="rocket" href="/components/get-started">
    Install, theme, and render your first component.
  </Card>

  <Card title="Build a member dining app" icon="utensils" href="/recipes/mains/member-dining-app">
    Compose the components into a full flow.
  </Card>
</CardGroup>