AuthLayout

A full-page layout component designed specifically for authentication screens. It provides a consistent structure with optional header, progress indicator, and centered content area, making it perfect for login pages, signup flows, and password reset screens.

Installation

npx bigblocks add auth-layout

Import

import { AuthLayout } from 'bigblocks';

Props

Prop	Type	Required	Default	Description
children	`ReactNode`	Yes	-	Main content to display
title	`string`	No	-	Optional page title
subtitle	`string`	No	-	Optional page subtitle
showProgress	`boolean`	No	`false`	Show progress indicator
progressStep	`number`	No	`1`	Current step number
totalSteps	`number`	No	`3`	Total number of steps
className	`string`	No	-	Additional CSS classes

Basic Usage

import { AuthLayout, LoginForm } from 'bigblocks';

export default function LoginPage() {
  return (
    <AuthLayout title="Welcome Back">
      <LoginForm onSuccess={(user) => console.log('Logged in:', user)} />
    </AuthLayout>
  );
}

Advanced Usage

Multi-Step Registration

import { AuthLayout } from 'bigblocks';
import { useState } from 'react';

export default function SignupPage() {
  const [currentStep, setCurrentStep] = useState(1);
  const totalSteps = 4;

  return (
    <AuthLayout
      title="Create Your Account"
      subtitle="Join thousands of Bitcoin users"
      showProgress={true}
      progressStep={currentStep}
      totalSteps={totalSteps}
    >
      {currentStep === 1 && <EmailStep onNext={() => setCurrentStep(2)} />}
      {currentStep === 2 && <PasswordStep onNext={() => setCurrentStep(3)} />}
      {currentStep === 3 && <BackupStep onNext={() => setCurrentStep(4)} />}
      {currentStep === 4 && <ConfirmStep onComplete={() => console.log('Done!')} />}
    </AuthLayout>
  );
}

With Custom Styling

import { AuthLayout } from 'bigblocks';

export default function StyledAuthPage() {
  return (
    <AuthLayout
      title="Sign In"
      subtitle="Access your Bitcoin wallet"
      className="bg-gradient-to-b from-orange-50 to-white"
    >
      <LoginForm />
    </AuthLayout>
  );
}

Password Reset Flow

import { AuthLayout } from 'bigblocks';

export default function PasswordResetPage() {
  return (
    <AuthLayout 
      title="Reset Password"
      subtitle="We'll help you recover your account"
    >
      <form className="space-y-4">
        <input 
          type="email" 
          placeholder="Enter your email"
          className="w-full p-2 border rounded"
        />
        <button type="submit" className="w-full p-2 bg-blue-500 text-white rounded">
          Send Reset Link
        </button>
      </form>
    </AuthLayout>
  );
}

Common Patterns

Dynamic Progress Tracking

import { AuthLayout } from 'bigblocks';
import { useState } from 'react';

export function OnboardingFlow() {
  const [step, setStep] = useState(1);
  const steps = [
    { title: "Account Info", component: AccountInfo },
    { title: "Security Setup", component: SecuritySetup },
    { title: "Backup Creation", component: BackupCreation },
    { title: "Verification", component: Verification }
  ];

  const CurrentStepComponent = steps[step - 1].component;

  return (
    <AuthLayout
      title={steps[step - 1].title}
      showProgress={true}
      progressStep={step}
      totalSteps={steps.length}
    >
      <CurrentStepComponent 
        onNext={() => setStep(step + 1)}
        onBack={() => setStep(step - 1)}
      />
    </AuthLayout>
  );
}

With Error Handling

import { AuthLayout, ErrorDisplay } from 'bigblocks';
import { useState } from 'react';

export function AuthWithErrors() {
  const [error, setError] = useState(null);

  return (
    <AuthLayout title="Sign In">
      {error && <ErrorDisplay error={error} />}
      <LoginForm 
        onError={(err) => setError(err.message)}
        onSuccess={(user) => {
          setError(null);
          console.log('Success!');
        }}
      />
    </AuthLayout>
  );
}

Conditional Content

import { AuthLayout } from 'bigblocks';

export function ConditionalAuthPage({ isNewUser }) {
  return (
    <AuthLayout
      title={isNewUser ? "Create Account" : "Welcome Back"}
      subtitle={isNewUser ? "Start your Bitcoin journey" : "Sign in to continue"}
    >
      {isNewUser ? <SignupFlow /> : <LoginForm />}
    </AuthLayout>
  );
}

Layout Structure

The AuthLayout component creates a full-height page with the following structure:

┌─────────────────────────────────┐
│         Header Section           │
│      Title & Subtitle Text       │
├─────────────────────────────────┤
│                                 │
│    Progress Bar (if enabled)     │
│    [===========------] 60%       │
│                                 │
│   ┌─────────────────────────┐   │
│   │                         │   │
│   │    Centered Content     │   │
│   │     (440px max width)   │   │
│   │                         │   │
│   └─────────────────────────┘   │
│                                 │
└─────────────────────────────────┘

Features

Full Height Layout

Automatically fills viewport height
Ensures content is always centered
No scrolling for standard auth forms

Progress Tracking

Visual progress bar for multi-step flows
Percentage display for accessibility
Smooth animations between steps

Responsive Design

Adapts to all screen sizes
Maintains readability on mobile
Consistent padding and spacing

Theme Integration

Follows active theme colors
Supports dark/light modes
Consistent with BigBlocks design system

Styling

AuthLayout uses Radix Themes design tokens:

Background: var(--color-background)
Text Color: var(--gray-12) for titles
Spacing: var(--space-4) padding
Container: 440px maximum width for content
Progress Bar: Theme accent color

Best Practices

Title Usage: Keep titles concise and action-oriented (e.g., "Sign In", "Create Account")
Progress Steps: Use progress tracking for flows with 3 or more steps
Content Width: Content is limited to 440px for optimal readability
Spacing: The layout maintains consistent padding across all screen sizes
Subtitle: Use subtitles to provide helpful context or instructions

Accessibility

Uses semantic HTML structure with proper heading hierarchy
Progress indicator includes percentage text for screen readers
Maintains focus management during step transitions
Fully keyboard navigable
Supports reduced motion preferences

Troubleshooting

Content Not Centering

Ensure parent container doesn't have conflicting styles
Check that the layout is at the root of your page component
Verify no global CSS is overriding flexbox properties

Progress Bar Not Showing

Confirm showProgress prop is set to true
Verify progressStep and totalSteps are valid numbers
Check that progressStep is between 1 and totalSteps

Layout Height Issues

AuthLayout uses min-h-screen - ensure no parent has height constraints
Check for conflicting global styles on html or body elements

AuthCard - Card-based container for auth forms
CenteredLayout - Generic centered layout wrapper
LoginForm - Common child component for sign-in
SignupFlow - Multi-step registration component
LoadingLayout - Loading state layout
ErrorLayout - Error state layout
SuccessLayout - Success state layout

API Reference

Progress Calculation

The progress bar percentage is calculated as:

percentage = (progressStep / totalSteps) * 100

Layout Sizing

Content Max Width: 440px
Vertical Spacing: Flexible, centers content
Horizontal Padding: Responsive (16px mobile, 24px desktop)

AuthLayout

On this page