Authdog's frontend SDKs ship prebuilt, themeable UI components so you can put authentication inside your own layout — no redirect to a hosted page. They're the middle ground between the [Account portal](/docs/account-portal) and fully [custom flows](/docs/custom-flows).

## Available components

The SDKs provide a small set of drop-in components that cover the common surfaces of an app:

- **Sign-in** — the full sign-in experience (credentials, social, SSO) rendered in place.
- **Sign-up** — self-service registration.
- **User button / profile** — the signed-in user's avatar, menu, and account-management screens.
- **Organization switcher** — lets a member move between the [organizations](/docs/organizations) they belong to.

Each component talks to the same environment as your session, so it always reflects the connections and policies configured for that environment.

## Which SDKs provide them

Components ship in the React SDK (`react-elements`) and are re-exported by the framework SDKs — Next.js, Remix, SvelteKit, TanStack Start, Vue/Nuxt, Angular, Astro, Gatsby, RedwoodJS, and React Native/Expo. See the full list in [Integrations](/docs/integrations) and the SDK-specific [Quickstarts](/docs/quickstarts).

## Theming

Components inherit the environment's theme (logo, colors, copy) and can be styled further to match your app. Because theming is per environment, the same component looks right in dev, staging, and production without code changes — see [Deployments](/docs/deployments).

## Mounting a component

A sign-in component is mounted like any other React element inside a provider that carries your environment's public key. The exact props vary by SDK; this is illustrative:

```tsx
import { AuthdogProvider, SignIn } from "@authdog/react-elements";

export default function App() {
  return (
    <AuthdogProvider publicKey={process.env.PK_AUTHDOG}>
      <SignIn />
    </AuthdogProvider>
  );
}
```

Once the user signs in, the component establishes the `authdog-session` for the environment, just like the hosted portal does.

## Portal, components, or custom?

- Use the **[Account portal](/docs/account-portal)** when a hosted, redirect-based experience is enough.
- Use **components** when you want prebuilt UI inside your own app.
- Use **[custom flows](/docs/custom-flows)** when you need full headless control over the UI and edge cases.