`@authdog/react-elements` is a presentational UI kit for React 18+: navbar, user profile, dropdown, and TOTP input. It does not provide a session, provider, sign-in flow, or access control. Pair it with [Next.js](/docs/frameworks/nextjs), [Remix](/docs/frameworks/remix), or your own [backend](/docs/backend).

## Install

```package-install
@authdog/react-elements
```

Peer dependencies are `react` and `react-dom` 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`
- `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

Declare every dependency explicitly. This example receives validated identity data and navigation/logout callbacks from its host app:

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

type AppNavbarProps = {
  user: unknown
  isLoading: boolean
  identityHost: string
  environmentId: string
  onNavigate: (href: string) => void
  onLogout: () => void
}

export function AppNavbar(props: AppNavbarProps) {
  return (
    <Navbar
      logoText="ACME Corp"
      items={[{ title: "Dashboard", href: "/dashboard" }]}
      user={props.user}
      isLoading={props.isLoading}
      identityHost={props.identityHost}
      environmentId={props.environmentId}
      onNavItemClick={props.onNavigate}
      onProfileSelected={() => props.onNavigate("/profile")}
      onLogout={props.onLogout}
    />
  )
}
```

`Navbar` uses `identityHost` and `environmentId` to open hosted sign-in when no user is supplied. Pass values from a trusted, validated public-key configuration. Components render identity and invoke callbacks only; validate sessions and enforce access server-side.

## 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.