---
title: UI components
description: A complete drop-in UI library for auth — sign-in, organizations, profile, API keys, webhooks — for React and React Native.
sidebar:
  label: Overview
---

`@vortex-api/convex-auth` ships a full component library, not just hooks. Every surface is a working component — drop it in, theme it with `classNames` and `copy` overrides, and it talks to your Convex backend through the client.

Type names in these pages are shortened for readability — see `packages/auth/dist/react.d.ts` for exact types.

```ts
import { ConvexAuthProvider, ConvexAuthSignInPage } from "@vortex-api/convex-auth/react";
```

## React

**[Sign-in & onboarding](/convex-auth/components/react/sign-in)**

Full sign-in/sign-up pages, forms, social buttons, trigger buttons, and client screens.

**[Organizations](/convex-auth/components/react/organization)**

Org switcher, creation, member lists, invitations, and the role manager surface.

**[Account & profile](/convex-auth/components/react/account)**

User profile, image upload, email change, password reset, 2FA, and session management.

**[API keys](/convex-auth/components/react/api-keys)**

Issue, rotate, and revoke keys without building the UI yourself.

**[Webhooks](/convex-auth/components/react/webhooks)**

Endpoint and delivery management with filters, pagination, and settings.

**[Security audit](/convex-auth/components/react/security)**

Audit log list and row components for the security event trail.

**[Providers & primitives](/convex-auth/components/react/providers)**

Runtime providers, auth-state boundaries, and the shared primitives everything is built from.

## React Native

The Expo component set — auth screens, org switcher and members, session list, profile and 2FA forms — built on secure token storage and deep links.

**[React Native components](/convex-auth/components/react-native)**

The full Expo component catalog.

## Theming

Wrap your app with `ConvexAuthAppearanceProvider` to manage light/dark/system theming. `useConvexAuthAppearance` returns the current `theme`, resolved `resolvedTheme`, and `setTheme`. The provider sets `data-convex-auth-theme` on the document root and persists the user's choice in `localStorage`.

```tsx
<ConvexAuthAppearanceProvider defaultTheme="system" storageKey="convex-auth-theme">
  {children}
</ConvexAuthAppearanceProvider>
```

Every component accepts `classNames` and `copy` props for per-component styling and text overrides — see [Theming](/convex-auth/theming) for the full token model.

## Migrating from Clerk or WorkOS

| convex-auth component                                                           | Clerk equivalent                                  | WorkOS equivalent                 |
| ------------------------------------------------------------------------------- | ------------------------------------------------- | --------------------------------- |
| `ConvexAuthProvider`                                                            | `ClerkProvider`                                   | — (AuthKit is hosted)             |
| `ConvexAuthSignInPage` / `ConvexAuthSignUpPage`                                 | `SignIn` / `SignUp`                               | AuthKit hosted flow               |
| `ConvexAuthSignInButton` / `ConvexAuthSignUpButton` / `ConvexAuthSignOutButton` | `SignInButton` / `SignUpButton` / `SignOutButton` | —                                 |
| `AuthSignedInBoundary` / `AuthSignedOutBoundary`                                | `SignedIn` / `SignedOut`                          | —                                 |
| `ConvexUserButton`                                                              | `UserButton`                                      | `UsersManagement` widget (hosted) |
| `ConvexUserProfile`                                                             | `UserProfile`                                     | `UserProfile` widget              |
| `ConvexOrganizationSwitcher`                                                    | `OrganizationSwitcher`                            | —                                 |
| `ConvexOrganizationList`                                                        | `OrganizationList`                                | —                                 |
| `ConvexCreateOrganization`                                                      | `CreateOrganization`                              | —                                 |
| `ConvexOrganizationProfile`                                                     | `OrganizationProfile`                             | —                                 |
| `ConvexOrganizationMembersSurface` / `ConvexOrganizationMemberList`             | `OrganizationProfile` members view                | Admin Portal users table          |
| `ConvexOrganizationInviteForm`                                                  | `OrganizationProfile` invite tab                  | —                                 |

No Clerk or WorkOS equivalents exist for `ConvexApiKeyCreateForm` / `ConvexApiKeyList`, the `ConvexWebhook*` delivery surfaces, `ConvexSecurityAuditList`, `ConvexOrganizationRoleManagerSurface` (custom-role RBAC editor), or the standalone `ConvexEnableTwoFactorForm` / `ConvexVerifyTwoFactorForm` / `ConvexChangeEmailForm` — those are convex-auth capabilities with no drop-in counterpart to migrate. Full cutover paths: [from Clerk](/convex-auth/migrating-from-clerk), [from WorkOS](/convex-auth/migrating-from-workos).