Auth Shell

Authentication page layout with centered and split variants for sign-in, sign-up, password-reset, and other credential flows. Provides logo, form card, footer, and optional aside slots.

Components

Auth Shell

layout

hybrid

<arc-auth-shell>

Overview

AuthShell is a page layout for authentication flows. Instead of assembling a centered card with manual CSS every time you need a login page, you get dedicated slots for your logo, form content, footer links, and an optional marketing aside panel. Two layout variants cover the most common patterns. The `centered` variant places a single card in the middle of the viewport, which suits minimal sign-in pages, password-reset screens, and invite-acceptance flows. The `split` variant divides the viewport into a form side and an aside panel, with room for a product illustration, testimonial, or feature highlights alongside the credentials form. Both variants are responsive. On mobile, the split layout collapses to a single column and hides the aside panel, with no media-query work on your part. The card region has a max-width of 420px, which stops inputs getting too wide on large monitors and still leaves room for multi-field forms, social login buttons, and terms-of-service links.

Guidelines

When to use

Use the centered variant for simple flows like sign-in, password reset, and magic-link entry
Use the split variant when you have marketing content, illustrations, or testimonials to show alongside the form
Place your brand logo in the logo slot so it appears above the form card consistently
Include a footer slot with links to terms of service, privacy policy, and support
Pair with ARC UI Input, Select, and Button components for consistent form styling
Keep the form short: ask only for credentials and one optional remember-me toggle

When not to use

Do not nest AuthShell inside AppShell; auth pages should be standalone, outside the main app chrome
Do not use the split variant for mobile-only apps where the aside will never be visible
Do not put navigation bars or sidebars inside AuthShell; it is a single-purpose layout
Do not overload the form card with too many fields; split long registration forms into multi-step flows instead
Do not forget to provide a way back to the marketing site or a "sign up" link in the footer

Features

Two layout variants: centered (single card) and split (form + aside panel)
Dedicated slots for logo, default content (form), footer, and aside
Responsive split layout collapses to single column on mobile
Card region has a 420px max-width
CSS custom property theming via ARC UI design tokens
Aside panel auto-hides on narrow viewports to keep forms uncluttered
Exposed CSS parts (shell, logo, card, footer, form-side, aside) for deep customization
Works with Input, Button, Toggle, and other ARC UI form components

Preview

ARC UI

Sign In

Enter your credentials to continue

Forgot password?

Don't have an account? Sign up

🔒

Secure by default

Your data is encrypted end-to-end with enterprise-grade security built into every layer.

Usage

Layout and styling work without JavaScript via the HTML/CSS versions. Interactive features like events and state management require the Web Component or a framework wrapper.

<script type="module" src="@arclux/arc-ui"></script>

<arc-auth-shell variant="split">
  <div slot="logo" style="font-size: 22px; font-weight: 700;">ARC UI</div>

  <div style="display: flex; flex-direction: column; gap: 16px;">
    <h2 style="margin: 0;">Sign In</h2>
    <p style="margin: 0; color: var(--text-muted); font-size: 14px;">Enter your credentials to continue</p>
    <arc-input label="Email" type="email" placeholder="you@example.com"></arc-input>
    <arc-input label="Password" type="password" placeholder="••••••••"></arc-input>
    <div style="display: flex; align-items: center; justify-content: space-between;">
      <arc-toggle size="sm" label="Remember me"></arc-toggle>
      <arc-link href="#">Forgot password?</arc-link>
    </div>
    <arc-button variant="primary" style="width: 100%;">Sign In</arc-button>
  </div>

  <div slot="footer">Don't have an account? <arc-link href="#">Sign up</arc-link></div>
  <div slot="aside" style="padding: 40px; text-align: center;">
    <h3>Secure by default</h3>
    <p style="color: var(--text-muted);">Enterprise-grade encryption on every layer.</p>
  </div>
</arc-auth-shell>

import { AuthShell, Input, Button, Toggle, Link } from '@arclux/arc-ui-react';

export function SignInPage() {
  return (
    <AuthShell variant="split">
      <div slot="logo" style={{ fontSize: 22, fontWeight: 700 }}>ARC UI</div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <h2 style={{ margin: 0 }}>Sign In</h2>
        <p style={{ margin: 0, color: 'var(--text-muted)', fontSize: 14 }}>
          Enter your credentials to continue
        </p>
        <Input label="Email" type="email" placeholder="you@example.com" />
        <Input label="Password" type="password" placeholder="••••••••" />
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <Toggle size="sm" label="Remember me" />
          <Link href="#">Forgot password?</Link>
        </div>
        <Button variant="primary" style={{ width: '100%' }}>Sign In</Button>
      </div>

      <div slot="footer">Don't have an account? <Link href="#">Sign up</Link></div>
      <div slot="aside" style={{ padding: 40, textAlign: 'center' }}>
        <h3>Secure by default</h3>
        <p style={{ color: 'var(--text-muted)' }}>Enterprise-grade encryption on every layer.</p>
      </div>
    </AuthShell>
  );
}

<script setup>
import { AuthShell, Input, Button, Toggle, Link } from '@arclux/arc-ui-vue';
</script>

<template>
  <AuthShell variant="split">
    <div slot="logo" style="font-size: 22px; font-weight: 700;">ARC UI</div>

    <div style="display: flex; flex-direction: column; gap: 16px;">
      <h2 style="margin: 0;">Sign In</h2>
      <p style="margin: 0; color: var(--text-muted); font-size: 14px;">
        Enter your credentials to continue
      </p>
      <Input label="Email" type="email" placeholder="you@example.com" />
      <Input label="Password" type="password" placeholder="••••••••" />
      <div style="display: flex; align-items: center; justify-content: space-between;">
        <Toggle size="sm" label="Remember me" />
        <Link href="#">Forgot password?</Link>
      </div>
      <Button variant="primary" style="width: 100%;">Sign In</Button>
    </div>

    <div slot="footer">Don't have an account? <Link href="#">Sign up</Link></div>
    <div slot="aside" style="padding: 40px; text-align: center;">
      <h3>Secure by default</h3>
      <p style="color: var(--text-muted);">Enterprise-grade encryption on every layer.</p>
    </div>
  </AuthShell>
</template>

<script>
  import { AuthShell, Input, Button, Toggle, Link } from '@arclux/arc-ui-svelte';
</script>

<AuthShell variant="split">
  <div slot="logo" style="font-size: 22px; font-weight: 700;">ARC UI</div>

  <div style="display: flex; flex-direction: column; gap: 16px;">
    <h2 style="margin: 0;">Sign In</h2>
    <p style="margin: 0; color: var(--text-muted); font-size: 14px;">
      Enter your credentials to continue
    </p>
    <Input label="Email" type="email" placeholder="you@example.com" />
    <Input label="Password" type="password" placeholder="••••••••" />
    <div style="display: flex; align-items: center; justify-content: space-between;">
      <Toggle size="sm" label="Remember me" />
      <Link href="#">Forgot password?</Link>
    </div>
    <Button variant="primary" style="width: 100%;">Sign In</Button>
  </div>

  <div slot="footer">Don't have an account? <Link href="#">Sign up</Link></div>
  <div slot="aside" style="padding: 40px; text-align: center;">
    <h3>Secure by default</h3>
    <p style="color: var(--text-muted);">Enterprise-grade encryption on every layer.</p>
  </div>
</AuthShell>

import { Component } from '@angular/core';
import { AuthShell, Input, Button, Toggle, Link } from '@arclux/arc-ui-angular';

@Component({
  imports: [AuthShell, Input, Button, Toggle, Link],
  template: `
    <arc-auth-shell variant="split">
      <div slot="logo" style="font-size: 22px; font-weight: 700;">ARC UI</div>

      <div style="display: flex; flex-direction: column; gap: 16px;">
        <h2 style="margin: 0;">Sign In</h2>
        <p style="margin: 0; color: var(--text-muted); font-size: 14px;">
          Enter your credentials to continue
        </p>
        <arc-input label="Email" type="email" placeholder="you@example.com"></arc-input>
        <arc-input label="Password" type="password" placeholder="••••••••"></arc-input>
        <div style="display: flex; align-items: center; justify-content: space-between;">
          <arc-toggle size="sm" label="Remember me"></arc-toggle>
          <arc-link href="#">Forgot password?</arc-link>
        </div>
        <arc-button variant="primary" style="width: 100%;">Sign In</arc-button>
      </div>

      <div slot="footer">Don't have an account? <arc-link href="#">Sign up</arc-link></div>
      <div slot="aside" style="padding: 40px; text-align: center;">
        <h3>Secure by default</h3>
        <p style="color: var(--text-muted);">Enterprise-grade encryption on every layer.</p>
      </div>
    </arc-auth-shell>
  `,
})
export class SignInPageComponent {}

import { AuthShell, Input, Button, Toggle, Link } from '@arclux/arc-ui-solid';

export function SignInPage() {
  return (
    <AuthShell variant="split">
      <div slot="logo" style={{ 'font-size': '22px', 'font-weight': '700' }}>ARC UI</div>

      <div style={{ display: 'flex', 'flex-direction': 'column', gap: '16px' }}>
        <h2 style={{ margin: '0' }}>Sign In</h2>
        <p style={{ margin: '0', color: 'var(--text-muted)', 'font-size': '14px' }}>
          Enter your credentials to continue
        </p>
        <Input label="Email" type="email" placeholder="you@example.com" />
        <Input label="Password" type="password" placeholder="••••••••" />
        <div style={{ display: 'flex', 'align-items': 'center', 'justify-content': 'space-between' }}>
          <Toggle size="sm" label="Remember me" />
          <Link href="#">Forgot password?</Link>
        </div>
        <Button variant="primary" style={{ width: '100%' }}>Sign In</Button>
      </div>

      <div slot="footer">Don't have an account? <Link href="#">Sign up</Link></div>
      <div slot="aside" style={{ padding: '40px', 'text-align': 'center' }}>
        <h3>Secure by default</h3>
        <p style={{ color: 'var(--text-muted)' }}>Enterprise-grade encryption on every layer.</p>
      </div>
    </AuthShell>
  );
}

import { AuthShell, Input, Button, Toggle, Link } from '@arclux/arc-ui-preact';

export function SignInPage() {
  return (
    <AuthShell variant="split">
      <div slot="logo" style={{ fontSize: 22, fontWeight: 700 }}>ARC UI</div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <h2 style={{ margin: 0 }}>Sign In</h2>
        <p style={{ margin: 0, color: 'var(--text-muted)', fontSize: 14 }}>
          Enter your credentials to continue
        </p>
        <Input label="Email" type="email" placeholder="you@example.com" />
        <Input label="Password" type="password" placeholder="••••••••" />
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <Toggle size="sm" label="Remember me" />
          <Link href="#">Forgot password?</Link>
        </div>
        <Button variant="primary" style={{ width: '100%' }}>Sign In</Button>
      </div>

      <div slot="footer">Don't have an account? <Link href="#">Sign up</Link></div>
      <div slot="aside" style={{ padding: 40, textAlign: 'center' }}>
        <h3>Secure by default</h3>
        <p style={{ color: 'var(--text-muted)' }}>Enterprise-grade encryption on every layer.</p>
      </div>
    </AuthShell>
  );
}

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-auth-shell — requires auth-shell.css + base.css (or arc-ui.css) -->
<div class="arc-auth-shell">
  <div class="auth-shell--split">
   <div class="form-side">
   <div class="logo">

   </div>
   <div class="card">
   AuthShell
   </div>
   <div class="footer">

   </div>
   </div>
   <div class="aside-side">

   </div>
   </div>
</div>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-auth-shell — self-contained, no external CSS needed -->
<style>
  @media (max-width: 768px) {
    .arc-auth-shell .auth-shell--split { grid-template-columns: 1fr; }
  }
  @media (max-width: 768px) {
    .arc-auth-shell .auth-shell--split .aside-side { display: none; }
  }
</style>
<div class="arc-auth-shell" style="display: block; box-sizing: border-box">
  <div class="auth-shell--split" style="display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; box-sizing: border-box">
   <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgb(10, 10, 15); padding: 40px 24px">
   <div style="margin-bottom: 40px; text-align: center">

   </div>
   <div style="background: rgb(13, 13, 18); border: 1px solid rgb(34, 34, 41); border-radius: 14px; padding: 40px; width: 100%; max-width: 420px; box-sizing: border-box">
   AuthShell
   </div>
   <div style="margin-top: 24px; color: rgb(124, 124, 137); font-size: 13px; text-align: center">

   </div>
   </div>
   <div class="aside-side" style="display: flex; align-items: center; justify-content: center; background: rgb(3, 3, 7); padding: 40px">

   </div>
   </div>
</div>

API

variant'centered' | 'split'='centered': Controls the page layout. Centered places a single card in the middle of the viewport, best for focused credential flows. Split divides the viewport into a form side and an aside panel for marketing content or illustrations. On mobile, split collapses to a single-column centered layout automatically.

Auth Shell

Overview

Guidelines

When to use

When not to use

Features

Preview

Sign In

Secure by default

Usage

API

See Also

Docs

Project

Arclight