Prebuilt screens

The hooks in the rest of this section give you the logic and leave the markup to you. If you would rather not build login and password-reset screens by hand, @kerne/react/ui ships them. They read your tenant’s auth settings at runtime. Turn magic link on in your dashboard and the button appears — no code change, no release.

npm install @kerne/react

Everything lives under the /ui subpath so an app that only uses hooks does not ship the screens.

import { AuthFlow } from '@kerne/react/ui';

<AuthFlow> covers sign-in, sign-up, forgot/reset password, magic-link landings, email verification and account activation. Moving between them is internal, so you do not wire any navigation:

import { KerneProvider } from '@kerne/react';
import { AuthFlow } from '@kerne/react/ui';

function App() {
  return (
    <KerneProvider appId="your-app-id">
      <AuthFlow onSuccess={() => (window.location.href = '/dashboard')} />
    </KerneProvider>
  );
}

It picks the right step on its own. A user arriving from an emailed reset link lands on the password form; everyone else lands on sign-in.

If you route each step yourself, pass step and onStepChange to drive it from your router — or import the individual screens (LoginForm, RegisterForm, ResetPasswordForm…) and mount one per route.

What it renders

Your setting	What the user sees
`enable_magic_link` on	A “send me a sign-in link” button, used by default
`enable_credentials` on	Email + password fields
Both on	Magic link first, with a link to switch to a password
`oauth_providers` set	A button per provider, above the email form
`registration_mode: INVITE_ONLY`	An invitation code field on sign-up
`registration_mode: CLOSED`	No sign-up form, and no link to one

The account screen

<UserProfile> is a tabbed account manager — profile, security, billing:

import { UserProfile } from '@kerne/react/ui';

<UserProfile />;

Drop tabs you do not need. A free product has no billing to show:

<UserProfile tabs={['profile', 'security']} />

See Account screens for the individual blocks.

Selling a plan

<PricingTable> is a different job from the account screen above - not “manage your subscription,” but the page that sells one, built from your live catalog:

import { PricingTable } from '@kerne/react/ui';

<PricingTable defaultLabel="annual">
  <PricingTable.LabelSwitch />
  <PricingTable.Plans featuredSlug="pro" featuredBadge="Most popular" />
</PricingTable>;

See <PricingTable> for composing your own layout instead of the grid shortcut.

Everything exported

Sign-in journey — AuthFlow, LoginForm, RegisterForm, MagicLinkCallback, ForgotPasswordForm, ResetPasswordForm, VerifyEmailForm, ActivateAccountForm Account — UserProfile, ProfileSection, SecuritySection, BillingSection, ChangePasswordForm Billing — SubscriptionCard, UsageMeters, CheckoutResult, UpgradePrompt, PricingTable Elsewhere — WaitlistForm, UserButton, SignOutButton

Account screens

The profile, billing and usage blocks.

Pricing page

Plan cards, the label toggle, and composing your own layout.

Styling & language

Match your brand, and translate the copy.

Server SDK

Frontend SDKs

Prebuilt screens

What it renders

The account screen

Selling a plan

Everything exported

Next

Account screens

Pricing page

Styling & language

​One component for the whole sign-in journey

​What it renders

​The account screen

​Selling a plan

​Everything exported

​Next

Account screens

Pricing page

Styling & language

One component for the whole sign-in journey

What it renders

The account screen

Selling a plan

Everything exported

Next