React Elements

@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, Remix, or your own backend.

Install

npm install @authdog/react-elements

yarn add @authdog/react-elements

pnpm add @authdog/react-elements

bun add @authdog/react-elements

deno add npm:@authdog/react-elements

Peer dependencies are react and react-dom 18 or 19. Import the stylesheet once at your app root:

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:

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 — every component and prop in depth.
• Next.js — the most common pairing for these elements.
• Account portal — the zero-config hosted alternative to building your own UI.