AuthPanel
auth-panelBuilds the branded half of a split authentication page with token-based gradients, highlights, content, and a footer.
Usage
Split screen login page
The left panel + right form is the standard layout for login/registration/password retrieval. The right half is equipped with LoginForm surface={false} - the visual weight is already borne by the left panel, and adding another card is the card within the card.
Taking ideas to the edge of the world
Create an account in five minutes and start your first project.
- Start for free, and the computing power will automatically return to zero when you are free.
- From git push to global edge online
<div className="grid md:grid-cols-2">
<AuthPanel
brand={<Brand name="Hanyun" description="Global Edge Computing" />}
title="Sending ideas to the edge of the world"
description="Create an account in five minutes and start your first project. No credit card required."
highlights={["Start for free, computing power will automatically return to zero when idle", "From git push to global edge online"]}
/>
<div className="grid place-items-center p-8">
<LoginForm surface={false} />
</div>
</div>Background recipe
The three levels are all written in the component with token color mixing (use --color-bg as base, and dark colors will automatically follow). The Tailwind tool class cannot provide radial-gradient with color-mix, and guard prohibits consumers from transmitting style to the library - this is the reason for the existence of this component.
radial
Use --color-bg as base, dark colors will follow automatically
linear
Use --color-bg as base, dark colors will follow automatically
mesh
Use --color-bg as base, dark colors will follow automatically
none
Use --color-bg as base, dark colors will follow automatically
<>
<AuthPanel gradient="radial" title="radial" />
<AuthPanel gradient="linear" title="linear" />
<AuthPanel gradient="mesh" title="mesh" />
<AuthPanel gradient="none" title="none" />
</>Brand color
color goes to resolveTone, which is the same path as Brand.color / Dot.color / ChartSeries.color: semantic color name, any CSS color or variable can be received. The gradient changes color along with the check mark.
chart-2
- Gradient follows along with check mark
success
- Semantic color names are parsed as usual
<AuthPanel color="chart-2" title="Change brand color" highlights={["Gradient follows with check mark"]} />Bottom area
footer is affixed to the bottom of the panel (Registration Number / Copyright / Secondary Links), with the top content aligned to both ends of it.
Welcome back
Log in to continue
<AuthPanel
brand={<Brand name="Hanyun" />}
title="Welcome back"
footer="© 2026 Hanyun · Beijing ICP No. 000000"
/>When to use
Use AuthPanel for the promotional half of the standard split authentication layout: a gradient brand panel on the left and a sign-in, registration, or password-recovery form on the right.
The component exists to provide a supported expression for this background, not merely to save a few flex classes (hulianui/hulian#71):
- Tailwind utilities cannot express a recipe such as
radial-gradient(125% 125% at 0% 0%, color-mix(in oklab, var(--color-primary) 12%, var(--color-bg)), ...)cleanly. - The guard treats
styleoverrides on library components as errors.
Without a component-level recipe, consumers are forced back to a bare <div> with an inline background. AuthPanel keeps the most prominent surface in the component system: change the brand through color, and all recipes follow dark mode automatically because they mix against --color-bg.
Import
import { AuthPanel } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| brand | ReactNode | — | Brand slot, normally a Brand. |
| title | ReactNode | — | Main headline. |
| titleLevel | 1..6 | 2 | Semantic heading level. It changes only the h1-h6 element, not its visual size. |
| description | ReactNode | — | Supporting copy below the headline. |
| highlights | ReactNode[] | — | Benefit list. Each item receives a check mark that follows color. |
| children | ReactNode | — | Free-form middle content such as artwork, metrics, or a customer-logo wall. |
| footer | ReactNode | — | Footer content such as copyright, registration details, or secondary links. |
| color | string | "primary" | Brand color. Accepts a semantic tone, arbitrary CSS color, or variable through resolveTone, like Brand .color, Dot .color, and ChartSeries.color. |
| gradient | "radial" | "linear" | "mesh" | "none" | "radial" | Background recipe described below. |
| className | string | — | Class name for the root element. |
Background recipes
| Value | Appearance | Best suited to |
|---|---|---|
radial (default) | Soft glow originating from the upper-left corner. | General use and admin sign-in pages. |
linear | Directional 135-degree gradient with a small amount of brand color at both ends. | Layouts that benefit from a stronger direction. |
mesh | Three layered pools of light. | More expressive registration and landing pages. |
none | Solid surface background with no inline background value. | Composing DotPattern, GridPattern, or another pattern yourself. |
Example
// Split sign-in page: remove the form card surface to avoid nesting one card inside another.
<div className="grid min-h-dvh xl:grid-cols-2">
<AuthPanel
brand={<Brand name="Cloud Edge" description="Global edge computing" />}
title="Take your ideas to the global edge"
description="Create an account and launch your first project in five minutes. No credit card required."
highlights={["Start free and scale to zero when idle", "Go from git push to the global edge"]}
footer="© 2026 Cloud Edge"
className="hidden xl:flex"
/>
<div className="grid place-items-center p-8">
<LoginForm
surface={false}
fields={{
username: { label: "Administrator account", placeholder: "Enter your account", prefix: <UserRound /> },
password: { placeholder: "Enter your password", prefix: <KeyRound /> },
}}
/>
</div>
</div>// Registration page: mesh recipe with custom middle content.
<AuthPanel gradient="mesh" color="chart-2" title="Get started">
<img src="/illustration.svg" alt="" className="max-w-xs" />
</AuthPanel>Usage guidelines
- AuthPanel does not set its own height. It uses
h-full, so the outer grid owns the height. A split page typically usesgrid min-h-dvh xl:grid-cols-2. Hard-codingh-dvhinside the component would break embedded card layouts, as described in the AdminLayout `fitViewport` guidance. - Hide the decorative panel on narrow screens with `className="hidden xl:flex"` instead of rendering different server and client trees. The form can stand alone on small screens.
- Every gradient recipe mixes with
--color-bg, so dark mode requires no separate override. Wrapping the component in a consumerdark:background override disables that behavior. gradient="none"is for layering your own pattern, not for making the panel transparent. It retainsbg-surfaceso the panel remains visually distinct from the form area.- Pass
surface={false}to the adjacent LoginForm. The promotional panel already carries the visual weight, and another card surface creates a card-within-a-card layout. - A consumer
stylecan still replace the background as an escape hatch, but that bypasses the component system. Consider whether a reusablegradientrecipe should be added instead.
Related
LoginForm · Brand · Field · SocialButton · ClickCaptcha · DotPattern
Playground
Taking ideas to the edge of the world
Create an account in five minutes and start your first project.
- Start for free, and the computing power will automatically return to zero when you are free.
- From git push to global edge online
<AuthPanel
gradient="radial"
color="primary"
title="Taking ideas to the edge of the world"
description="Create an account in five minutes and start your first project."
/>