Login
The Login template provides a responsive two-column layout for authentication screens. It features a branded image panel on the left and a content area on the right, automatically collapsing to a single centered column below the lg breakpoint. The content area fills its grid column; apply your own max-w-* on the slotted content if a width cap is needed.
The component accepts two props — image (optional) and slot (required) — both of which take a ReactNode.
The component uses two named slots — #image (optional) and #slot (required).
Loading Code Block...Default (with image)
Section titled “Default (with image)”The default configuration renders a two-column grid. The left column displays your branded image or illustration using object-cover to fill the panel. The right column holds your authentication content. Below the lg breakpoint (1024 px), the image column is hidden and only the content area is shown.
This example pairs the Login template with
AuthButton to create a complete
sign-in screen with OAuth provider buttons.
Loading Code Block...Without image
Section titled “Without image”When
Loading Code Block...With Hubtel Auth iframe
Section titled “With Hubtel Auth iframe”The AuthButton components. You will need two values from your Hubtel dashboard:
BASE_URL— The authentication service endpoint (e.g.https://auth.hubtel.com)APP_ID— Your application’s unique identifier
Loading Code Block...Responsive behavior
Section titled “Responsive behavior”The Login template adapts automatically based on viewport width.
| Viewport | Layout |
|---|---|
Below sm (~640 px) | Image column hidden; content area fills full width and is centered. |
sm and above | Two-column grid: image panel (left, sticky h-screen) + content area (right, max-w-[480px]). |
When
How it works under the hood
Section titled “How it works under the hood”When image is provided the outer container uses min-h-screen w-full grid sm:grid-cols-2. The image panel is wrapped in hidden sm:flex h-screen sticky top-0 overflow-hidden so it stays pinned while the right column scrolls. The content area centers the slot inside a w-full max-w-[480px] wrapper with p-4 padding.
When image is omitted the outer container switches to min-h-screen w-full flex items-center justify-center, collapsing into a single centered column.
When the #image slot is provided the outer container uses h-screen w-full grid sm:grid-cols-2 sm:grid-rows-[1fr]. The image panel is wrapped in hidden sm:flex min-h-0 h-full overflow-hidden. The content area centers the #slot inside a full-width wrapper with p-4 padding.
When #image is absent the outer container switches to h-screen w-full flex items-center justify-center, collapsing into a single centered column.
Layout anatomy
Section titled “Layout anatomy”With image:
┌──────────────────────────────────────────────────┐│ min-h-screen ││ ┌─────────────────┐ ┌──────────────────────┐ ││ │ Image Panel │ │ Content Area │ ││ │ (sticky top) │ │ (max-w: 480px) │ ││ │ hidden < sm │ │ centered vertically │ ││ │ │ │ │ ││ └─────────────────┘ └──────────────────────┘ │└──────────────────────────────────────────────────┘Without image:
┌──────────────────────────────────────────────────┐│ min-h-screen ││ ┌──────────────────────┐ ││ │ Content Area │ ││ │ (max-w: 480px) │ ││ │ centered both axes │ ││ └──────────────────────┘ │└──────────────────────────────────────────────────┘| Props | Default | Type | Description |
|---|---|---|---|
| image | undefined | ReactNode | Optional. Content for the left branding column. Accepts any valid React node — typically an <img> with object-cover, a gradient panel, or marketing copy. Hidden below the sm breakpoint via hidden sm:flex. When omitted, the layout becomes a single centered column. |
| slot | - | ReactNode | Required. The main authentication content rendered in the right column. Constrained to max-w-[480px] and vertically centered with p-4 padding. Pass AuthButton components, a form, an iframe, or any custom UI. |
| Name | Default | Type | Description |
|---|---|---|---|
| #image | - | slot | Optional. Content for the left branding column. Accepts any template content — typically an <img> with object-cover, a gradient panel, or marketing copy. Hidden below the sm breakpoint. When absent, the layout becomes a single centered column. |
| #slot | - | slot | Required. The main authentication content rendered in the right column. Vertically centered with p-4 padding. Pass AuthButton components, a form, an iframe, or any template content. |
Accessibility
Section titled “Accessibility”- Always set a descriptive
titleattribute on iframes (e.g.title="Hubtel Authentication") so screen readers can announce the embedded content. - Use semantic
<form>,<label>, and<button>elements when building custom sign-in forms. - Provide
alttext on all images in the branding panel. - The image column is purely decorative — it is hidden on smaller screens and should not contain interactive content that users would miss.