`@authdog/react-elements` is the drop-in UI kit for React 18+ apps: a navbar, user profile, dropdown, and a TOTP validator that render your Authdog identity without you building the components. It pairs with a framework SDK — [Next.js](/docs/frameworks/nextjs), [Remix](/docs/frameworks/remix), [Gatsby](/docs/frameworks/gatsby), or [RedwoodJS](/docs/frameworks/redwood) — that resolves the [session](/docs/concepts/sessions-tokens).

## Install

```bash
npm install @authdog/react-elements
```

Peer deps are React 18 or 19. Import the stylesheet once at your app root:

```tsx
import "@authdog/react-elements/styles.css"
```

## Components

- `Navbar` — app navigation with a user menu; requires `identityHost` and `environmentId` (both read from your `pk_...` key's payload)
- `UserProfile` — renders the signed-in user's profile; `loading` is required
- `UserDropdown` — the account menu on its own
- `Button`, `ClientOnly` (SSR guard), `PlaceholderAlert`
- `TOTPValidator` — `{ onValidate: (code: string) => Promise<void> }` for MFA prompts

## Usage

Feed the components the user and identity payload your framework SDK already resolved:

```tsx
import {
  Navbar,
  UserProfile,
  PlaceholderAlert,
} from "@authdog/react-elements"

<Navbar
  logoText="ACME Corp"
  items={[]}
  isLoading={isLoading}
  user={user}
  environmentId={payload.environmentId}
  identityHost={payload.identityHost}
  onProfileSelected={() => router.push("/profile")}
  onLogout={() => {
    clearAuthdogSession()
    location.reload()
  }}
/>
```

The kit is presentational only — it renders identity, it doesn't enforce it. Resolve and guard sessions with your framework SDK and a [backend SDK](/docs/backend).

## Next steps

- [Component reference](/docs/components) — every component and prop in depth.
- [Next.js](/docs/frameworks/nextjs) — the most common pairing for these elements.
- [Account portal](/docs/account-portal) — the zero-config hosted alternative to building your own UI.