@dial8/auther-template-minimal

A clean, minimal template for @dial8/auther onboarding flows.

Features

• 🎨 Clean Design - Minimal, professional interface
• 🌙 Dark Mode - Built-in dark/light theme support
• 📱 Responsive - Works perfectly on all devices
• 🎯 Accessible - Follows accessibility best practices
• ⚡ Lightweight - Small bundle size
• 🔧 Customizable - Theme and brand customization

Installation

npm install @dial8/auther @dial8/auther-template-minimal

Usage

import { OnboardingFlow } from "@dial8/auther";
import { MinimalTemplate } from "@dial8/auther-template-minimal";
import { yourAdapter } from "./your-adapter";

function App() {
  return (
    <OnboardingFlow
      template={MinimalTemplate}
      adapter={yourAdapter}
      steps={["signInOrUp", "verifyEmail", "profile", "success"]}
      theme={{ 
        brandColor: "#0ea5e9", 
        darkMode: false 
      }}
      brand={{ 
        title: "Welcome to MyApp", 
        subtitle: "Get started in seconds",
        logo: "/logo.png" 
      }}
      redirectUrl="/dashboard"  // Redirect after completion
      onComplete={(user) => {
        console.log('Welcome', user.email);
        // Track analytics, send emails, etc.
      }}
    />
  );
}

Supported Steps

The MinimalTemplate supports all standard onboarding steps:

signInOrUp

• Clean email/password form
• Toggle between sign in and sign up modes
• Loading states and error handling
• Responsive design

verifyEmail

• Email verification confirmation
• Clear instructions for users
• Professional email icon

profile

• Profile completion form
• Display name input
• Consistent styling with auth forms

success

• Success confirmation page
• Celebration icon
• Welcome message
• Triggers completion callbacks and navigation

Theme Customization

const theme = {
  brandColor: "#0ea5e9",    // Primary brand color
  darkMode: true,           // Enable dark mode
};

Brand Customization

const brand = {
  title: "Welcome to MyApp",
  subtitle: "Get started with your account", 
  logo: "/path/to/logo.png"  // Optional logo
};

Visual Features

Light Mode

• Clean white background
• Subtle shadows and borders
• High contrast text for readability

Dark Mode

• Dark gray background (#1f2937)
• Card background (#374151)
• Light text with proper contrast ratios

Responsive Design

• Mobile-first approach
• Flexible card layout
• Proper spacing on all screen sizes

Form Elements

• Styled input fields
• Branded buttons
• Loading states
• Error message display
• Accessible form labels

Styling

The template uses inline styles for maximum compatibility and easy customization. All colors automatically adapt to light/dark mode based on the theme configuration.

Card Layout

• Centered modal overlay
• Maximum width: 400px
• Rounded corners
• Drop shadow
• Responsive padding

Typography

• Clear hierarchy
• Readable font sizes
• Proper line heights
• Theme-aware colors

Accessibility

• Semantic HTML structure
• Proper form labels
• Keyboard navigation support
• High contrast colors
• Screen reader friendly

Dependencies

• React 18+ or 19+
• @dial8/auther (peer dependency)

Related Packages

• @dial8/auther - Core onboarding library
• @dial8/auther-adapter-firebase - Firebase authentication

Creating Custom Templates

Want to create your own template? Use this as a reference:

import { TemplateProps } from '@dial8/auther';

export function MyCustomTemplate({ 
  step, ui, brand, theme, onNext, onSubmit, error, isLoading 
}: TemplateProps) {
  // Your custom template implementation
  return (
    <div>
      {/* Render based on current step */}
    </div>
  );
}

License

MIT

Support

• GitHub Issues
• Documentation