A flexible card component designed specifically for authentication forms and flows. It provides a consistent structure with optional header, content area, and footer sections, making it ideal for login forms, signup flows, and other authentication-related UI.

AuthCard Demo

Flexible card component designed for authentication forms and flows.

Welcome Back

Create Account

Join thousands of users

Already have an account?

Password Reset

Installation

npx bigblocks add auth-card

Import

import { AuthCard } from 'bigblocks';

Props

Prop	Type	Required	Default	Description
children	`ReactNode`	Yes	-	Card content
title	`string`	No	-	Optional card title
subtitle	`string`	No	-	Optional card subtitle
footer	`ReactNode`	No	-	Optional footer content
variant	`'default' \| 'outlined' \| 'elevated'`	No	`'default'`	Card style variant
className	`string`	No	-	Additional CSS classes

Basic Usage

import { AuthCard } from 'bigblocks';

export default function Example() {
  return (
    <AuthCard title="Welcome Back">
      <form>
        <input type="email" placeholder="Email" />
        <input type="password" placeholder="Password" />
        <button type="submit">Sign In</button>
      </form>
    </AuthCard>
  );
}

Advanced Usage

import { AuthCard } from 'bigblocks';
import { Text, Link } from '@radix-ui/themes';

export default function LoginCard() {
  return (
    <AuthCard
      title="Welcome Back"
      subtitle="Sign in to your account"
      footer={
        <div style={{ textAlign: 'center' }}>
          <Text size="2" color="gray">
            Don't have an account? <Link href="/signup">Sign up</Link>
          </Text>
        </div>
      }
      variant="elevated"
    >
      <LoginForm onSuccess={(user) => console.log('Logged in:', user)} />
    </AuthCard>
  );
}

Different Variants

import { AuthCard } from 'bigblocks';

export default function VariantExamples() {
  return (
    <div className="space-y-4">
      {/* Default variant */}
      <AuthCard title="Default Card" variant="default">
        <p>Standard surface card with subtle background</p>
      </AuthCard>

      {/* Outlined variant */}
      <AuthCard title="Outlined Card" variant="outlined">
        <p>Classic card with border</p>
      </AuthCard>

      {/* Elevated variant */}
      <AuthCard title="Elevated Card" variant="elevated">
        <p>Surface card with shadow for emphasis</p>
      </AuthCard>
    </div>
  );
}

Multi-Step Form

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

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

  return (
    <AuthCard 
      title="Create Account"
      subtitle={`Step ${currentStep} of ${totalSteps}`}
    >
      {currentStep === 1 && <EmailStep onNext={() => setCurrentStep(2)} />}
      {currentStep === 2 && <PasswordStep onNext={() => setCurrentStep(3)} />}
      {currentStep === 3 && <ProfileStep onComplete={() => console.log('Done!')} />}
    </AuthCard>
  );
}

Common Patterns

import { AuthCard, LoginForm } from 'bigblocks';
import { Link } from '@radix-ui/themes';

export function LoginPage() {
  return (
    <AuthCard 
      title="Sign In"
      footer={
        <div className="text-center">
          <Link href="/forgot-password">Forgot password?</Link>
        </div>
      }
    >
      <LoginForm />
    </AuthCard>
  );
}

Error State

import { AuthCard, ErrorDisplay } from 'bigblocks';

export function AuthWithError({ error }) {
  return (
    <AuthCard variant="outlined" title="Authentication Error">
      <ErrorDisplay error={error} />
      <LoginForm />
    </AuthCard>
  );
}

Loading State

import { AuthCard } from 'bigblocks';
import { Spinner } from '@radix-ui/themes';

export function LoadingAuth() {
  return (
    <AuthCard title="Authenticating...">
      <div className="flex justify-center p-8">
        <Spinner size="3" />
      </div>
    </AuthCard>
  );
}

Custom Styling

import { AuthCard } from 'bigblocks';

export function StyledAuthCard() {
  return (
    <AuthCard
      title="Custom Styled Card"
      variant="elevated"
      className="bg-gradient-to-br from-orange-50 to-orange-100"
    >
      <div className="space-y-4">
        <p>This card has custom background styling</p>
        <button className="btn-primary">Continue</button>
      </div>
    </AuthCard>
  );
}

Styling

AuthCard uses Radix Themes design tokens for consistent styling:

Spacing: Uses --space-6 for consistent padding
Colors: Automatically adapts to the current theme
Typography: Uses Radix heading and text components
Shadows: --shadow-6 for elevated variant

Variant Styles

default: Standard surface card with subtle background
outlined: Classic card with border styling
elevated: Surface card with shadow for emphasis and depth

Accessibility

Uses semantic HTML structure with proper heading hierarchy
Maintains keyboard navigation support
Compatible with screen readers
Proper ARIA attributes when needed

Best Practices

Title Hierarchy: Use title for main heading, subtitle for supporting text
Footer Content: Ideal for secondary actions, links, or disclaimers
Variant Selection:
- Use default for most authentication forms
- Use outlined for secondary forms or nested cards
- Use elevated for primary actions or important forms
Responsive Design: Card adapts to container width automatically
Content Spacing: Use consistent spacing within card content