Koala UI

Authentication

Complete sign-in and sign-up screens, ready to drop in. Seven layouts built from the LoginForm, SignUpForm and ProviderForm blocks: split pages, centered cards, magic links and Discord screens.

Variant 1

Pro

Variant 2

Pro

Variant 3

Pro

Variant 4

Pro

Variant 5

Pro

Variant 6

Pro

Variant 7

Pro

Built from#

Every screen composes the three auth blocks documented on the Authentication component page: LoginForm and SignUpForm (the email + password pair) and ProviderForm (the password-less, provider-first block). The split layouts drop the form variant="bare" into a SplitLayout pane so the shell owns the surface and a full-bleed SplitMedia holds the photo; the centered screens keep the default bordered card on a soft, flat backdrop. The lockup is a placeholder logo drawn in one currentColor shape, so it reads on the page and over a photo until you swap in your own, and the community screens carry the real Discord, X, YouTube, and Instagram marks, never icon stand-ins.

Responsive#

Each preview renders inside an iframe, so the screen's own breakpoints respond to the frame width, not the browser. On the split screens the media pane is hidden lg:block, so drag the handle or pick Mobile below the lg breakpoint and the photo drops away while the form fills the column. Pick Wide to force a 1280px viewport (scaled to fit the column) and see the two-pane split even on a narrow screen. Switch the site theme top-right to check any screen in dark or moonlight.

FAQ#

On the Authentication component page (/docs/components/auth-form). These sections are full-page compositions of those blocks; the component page documents each block's props, density, and the onSubmit / onProvider wiring to your auth backend.