UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Split Brand Login

blockauth

Split-layout login. Brand/marketing panel on the left (logo, headline, value-prop bullets, copyright) and the form on the right (email + password, SSO row, sign-up link). Collapses to single-column form-only on small screens. Edit the brand panel inline to swap product copy + bullet icons.

Installation

$npx shadcn@latest add https://uipkge.dev/r/lit/login-02.json
Manifest:https://uipkge.dev/r/lit/login-02.jsonInstalls to:src/uip/blocks/login-02/

Variants

Loading interactive previews…

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

Login02Payload
interface Login02Payload {
  email: string
  password: string
}
HTMLElementTagNameMap
interface HTMLElementTagNameMap {
    'uip-login-02': UipLogin02
  }
}

npm dependencies

litlucide

Theming

CSS custom properties referenced in this item. Override any of them in your :root or per-element to retheme.

--card--primary

Files installed (1)

  • src/uip/blocks/login-02/login-02.ts9.8 kB
    import { LitElement, css, html } from 'lit'
import { Palette, ShieldCheck, Zap } from 'lucide'
import { cn } from '../../lib/utils'
import { tailwind } from '../../lib/styles'
import { ThemeController } from '../../lib/theme'
import { icon } from '../../lib/icon'
// Side-effect imports: register the composed elements for standalone use
// (consumers who install only this block still get working primitives).
import '../../components/button/button'
import '../../components/input/input'
import '../../components/label/label'
import '../../components/separator/separator'
import type { UipInput } from '../../components/input/input'

export type Login02Provider = 'github' | 'google'

export interface Login02Payload {
  email: string
  password: string
}

/**
 * <uip-login-02> — the registry Login02 block as a web component.
 *
 * Class strings are React's Login02 verbatim, including the brand panel's
 * inline `color-mix` / `var(--primary)` styles. `onSubmit` (payload) /
 * `onForgotPassword` / `onSignUp` / `onOauth` (provider) become `submit` /
 * `forgot-password` / `sign-up` / `oauth` CustomEvents (bubbles, composed).
 * The commented zod sketch is not ported (code comment, no runtime effect).
 */
export class UipLogin02 extends LitElement {
  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }
  // :host display can't be a utility class (the host has no template of its own).
  static styles = [tailwind, css`:host { display: block; }`]

  static properties = {
    email: { state: true },
    password: { state: true },
  }

  private email = ''
  private password = ''

  constructor() {
    super()
    new ThemeController(this)
  }

  connectedCallback() {
    super.connectedCallback()
    this.setAttribute('data-uipkge', '')
    this.setAttribute('data-slot', 'login-02')
  }

  private handleSubmit(e: Event) {
    e.preventDefault()
    this.dispatchEvent(
      new CustomEvent<Login02Payload>('submit', {
        detail: { email: this.email, password: this.password },
        bubbles: true,
        composed: true,
      }),
    )
  }

  render() {
    return html`
      <div data-slot="login-02" class=${cn('grid min-h-svh lg:grid-cols-2')}>
        <aside
          class="border-border relative hidden flex-col justify-between overflow-hidden border-r p-12 lg:flex"
          style="background: color-mix(in oklch, var(--primary) 6%, var(--card))"
        >
          <div class="text-foreground relative z-[1] flex items-center gap-2.5">
            <div
              class="text-background font-display grid size-8 place-items-center rounded-md font-bold"
              style="background: var(--primary)"
            >
              U
            </div>
            <span class="font-display text-base font-semibold">Your Product</span>
          </div>

          <div class="relative z-[1] max-w-md">
            <p class="text-muted-foreground/80 mb-3 text-xs font-medium tracking-[0.14em] uppercase">
              Why teams switch
            </p>
            <h2 class="font-display text-3xl leading-tight font-semibold tracking-tight text-balance">
              Ship features in
              <em class="font-display font-semibold not-italic" style="color: var(--primary)"> hours </em>
              , not sprints.
            </h2>
            <p class="text-muted-foreground mt-4 text-sm leading-relaxed">
              Reusable components, opinionated defaults, and a registry that keeps your team writing product code
              instead of reinventing the same UI.
            </p>

            <ul class="mt-8 space-y-3 text-sm">
              <li class="flex items-start gap-3">
                <span class="mt-0.5 flex shrink-0" style="color: var(--primary)">${icon(Zap, 'zap', 'size-4')}</span>
                <span class="text-foreground">One-command install, full source ownership</span>
              </li>
              <li class="flex items-start gap-3">
                <span class="mt-0.5 flex shrink-0" style="color: var(--primary)"
                  >${icon(ShieldCheck, 'shield-check', 'size-4')}</span
                >
                <span class="text-foreground">SOC 2 compliant, SSO out of the box</span>
              </li>
              <li class="flex items-start gap-3">
                <span class="mt-0.5 flex shrink-0" style="color: var(--primary)"
                  >${icon(Palette, 'palette', 'size-4')}</span
                >
                <span class="text-foreground">Themeable tokens, dark mode, RTL ready</span>
              </li>
            </ul>
          </div>

          <p class="text-muted-foreground/70 relative z-[1] text-xs">© ${new Date().getFullYear()} Your Product, Inc.</p>
        </aside>

        <div class="flex items-center justify-center p-6 sm:p-12">
          <div class="w-full max-w-sm space-y-6">
            <div class="space-y-1.5 text-center lg:text-left">
              <h1 class="font-display text-3xl font-semibold tracking-tight">Welcome back</h1>
              <p class="text-muted-foreground text-sm">Sign in to continue to your workspace.</p>
            </div>

            <form class="space-y-4" @submit=${this.handleSubmit}>
              <div class="space-y-2">
                <uip-label for="login02-email">Email</uip-label>
                <uip-input
                  id="login02-email"
                  .value=${this.email}
                  type="email"
                  placeholder="you@example.com"
                  autocomplete="email"
                  required
                  @input=${(e: Event) => {
                    this.email = (e.target as UipInput).value
                  }}
                ></uip-input>
              </div>
              <div class="space-y-2">
                <div class="flex items-center justify-between">
                  <uip-label for="login02-password">Password</uip-label>
                  <button
                    type="button"
                    class="text-muted-foreground hover:text-foreground text-xs transition-colors"
                    @click=${() => this.dispatchEvent(new CustomEvent('forgot-password', { bubbles: true, composed: true }))}
                  >
                    Forgot?
                  </button>
                </div>
                <uip-input
                  id="login02-password"
                  .value=${this.password}
                  type="password"
                  autocomplete="current-password"
                  required
                  @input=${(e: Event) => {
                    this.password = (e.target as UipInput).value
                  }}
                ></uip-input>
              </div>
              <uip-button type="submit" class="w-full">Sign in</uip-button>
            </form>

            <div class="relative">
              <uip-separator></uip-separator>
              <span
                class="bg-background text-muted-foreground absolute -top-2.5 left-1/2 -translate-x-1/2 px-2 text-xs tracking-wider uppercase"
                >Or</span
              >
            </div>

            <div class="grid grid-cols-2 gap-2">
              <uip-button
                type="button"
                variant="outline"
                @click=${() =>
                  this.dispatchEvent(new CustomEvent('oauth', { detail: 'google', bubbles: true, composed: true }))}
              >
                <svg viewBox="0 0 24 24" class="size-4" aria-hidden="true">
                  <path
                    fill="#4285F4"
                    d="M22.5 12.27c0-.79-.07-1.54-.2-2.27H12v4.51h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.32z"
                  />
                  <path
                    fill="#34A853"
                    d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.99.66-2.25 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                  />
                  <path
                    fill="#FBBC05"
                    d="M5.84 14.1c-.22-.66-.35-1.36-.35-2.1s.13-1.44.35-2.1V7.07H2.18A10.97 10.97 0 0 0 1 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z"
                  />
                  <path
                    fill="#EA4335"
                    d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.83C6.71 7.31 9.14 5.38 12 5.38z"
                  />
                </svg>
                Google
              </uip-button>
              <uip-button
                type="button"
                variant="outline"
                @click=${() =>
                  this.dispatchEvent(new CustomEvent('oauth', { detail: 'github', bubbles: true, composed: true }))}
              >
                <svg class="size-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path
                    d="M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.4-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0C17 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z"
                  />
                </svg>
                GitHub
              </uip-button>
            </div>

            <p class="text-muted-foreground text-center text-xs">
              Don't have an account?
              <button
                type="button"
                class="text-foreground ml-1 font-medium hover:underline"
                @click=${() => this.dispatchEvent(new CustomEvent('sign-up', { bubbles: true, composed: true }))}
              >
                Sign up
              </button>
            </p>
          </div>
        </div>
      </div>
    `
  }
}

customElements.get('uip-login-02') || customElements.define('uip-login-02', UipLogin02)

declare global {
  interface HTMLElementTagNameMap {
    'uip-login-02': UipLogin02
  }
}

Raw manifest:https://uipkge.dev/r/lit/login-02.json