Sign in
The first screen anyone sees in a Buildpad app: a fixed ink brand panel beside a calm sign-in card. Everything below is the shipped page rebuilt with the same Mantine components, theme and tokens. Only the network calls are left out.
What generates this
buildpad add api-routeswritesapp/[lang]/login/page.tsxfrompackages/cli/templates/api/login-page.tsx. It posts to the same-origin/api/auth/loginproxy. The copy lives inlib/i18n/dictionaries/en.jsonunderapp.login.*, and the brand name is in the page itself.buildpad add external-oauthaddscomponents/auth/OAuthLoginButtons.tsx. The login page has a commented-out<OAuthLoginButtons showDivider />block that you uncomment. For XAppHub sign-in on an Engine project, useexternal-oauth-engine. It also addsapp/[lang]/auth/pending-access/page.tsx.
Sign-in page
The real page splits from Mantine’s md breakpoint (992px). This frame is narrower, so the split is forced here. The form is live, so try submitting it empty or with a malformed email.
Buildpad
The design system for professional web apps.
A comprehensive UI registry of copy-and-own components designed for high-performance enterprise applications.
Role-Based Access Control
Manage fine-grained permissions, roles, and users in real-time with an intuitive dashboard interface.
Unified Design Tokens
Maintain brand consistency with ink and ember accents on cool neutral greys, and Inter typography.
Secure Two-Tier Auth Proxy
Avoid CORS issues with direct browser-to-proxy route mapping, providing enhanced security out of the box.
Buildpad
Welcome back
Please sign in to access your account console
Or continue with
Sign in, desktop. The hero is a fixed ink panel (--ds-brand-hero) that stays dark in both schemes; the submit button has no color, so it renders as the ink CTA pill. The SSO buttons are OAuthLoginButtons showDivider from external-oauth, which overrides the outline's border and text with each provider's brand colour through styles.root. With more than one locale, a LanguageSwitcher select also appears at the card's top right. Fields, validation and the loading state are live.
States
What the card shows while validating, submitting and after a failed attempt.
Welcome back
Please sign in to access your account console
useForm validation: error on the field turns the border and message to --ds-danger. Empty fields are caught first by the native required check.Welcome back
Please sign in to access your account console
loading on the submit button while /api/auth/login answers — the pill keeps its width and the label is replaced by a loader.Welcome back
Please sign in to access your account console
notifications.show({ color: 'red' }), top-right. @mantine/notifications is not loaded here, so this is the core Notification it renders.Or continue with
?error=; the OAuth buttons show it as a color="red" Alert — here the XAppHub variant from external-oauth-engine.Phone layout and pending access
The same page in a narrow window, and the page XAppHub users see before an administrator gives them a role.
Buildpad
The design system for professional web apps.
A comprehensive UI registry of copy-and-own components designed for high-performance enterprise applications.
Role-Based Access Control
Manage fine-grained permissions, roles, and users in real-time with an intuitive dashboard interface.
Unified Design Tokens
Maintain brand consistency with ink and ember accents on cool neutral greys, and Inter typography.
Secure Two-Tier Auth Proxy
Avoid CORS issues with direct browser-to-proxy route mapping, providing enhanced security out of the box.
Buildpad
Welcome back
Please sign in to access your account console
Or continue with
Phone width. Below md the hero is hidden and a compact brand mark sits above the card, which tightens to lg padding and centres its heading.
Your account is waiting for access
Ask an administrator of this application to give your account a role. Then sign in again with XAppHub.
Back to sign-inPending access. Where the XAppHub callback sends a user whose account has no role yet: a warning Alert (color="yellow") and an ink variant="filled" button back to sign-in.
Built from
- Buttons: the ink CTA (no
color),loading, andvariant="outline"SSO buttons in each provider’s brand colour - Inputs:
TextInputandPasswordInputatsize="md"with left icons,requiredanderror - Feedback: the red and yellow
Alert, and theNotificationtoast - Typography: Inter Tight
Title, dimmedTextandAnchor - Layout:
Stack,GroupandDividerwith a label - Forms pattern: field spacing, validation messages and submit placement
- Foundations:
--ds-brand-hero,--ds-brand-mark,--ds-card-shadowand--ds-radius-card