@alzore16/ls-red — Red.

Red. — Illustrated Growth authentication theme (Login + Signup) for React — a warm illustrated page with top-bar actions, decorative SVG/graphic illustrations and a config-driven auth card. Every color, font, spacing token, string, icon and illustration lives in a single theme config object. No authentication provider is bundled or hard-coded.

Built with React 18/19 + Framer Motion (peer dependencies).

Installation

npm

npm install @alzore16/ls-red

pnpm

pnpm add @alzore16/ls-red

yarn

yarn add @alzore16/ls-red

bun

bun add @alzore16/ls-red

React, React DOM and Framer Motion are peer dependencies — your project must already have them installed.

Basic usage

import { useState } from "react";
import { AuthContainer, defaultTheme } from "@alzore16/ls-red";
import "@alzore16/ls-red/style.css";

function App() {
  const [mode, setMode] = useState("login");

  return (
    <AuthContainer
      theme={defaultTheme}
      mode={mode}
      onModeChange={setMode}
      onSubmit={async (values, mode) => {
        // Your auth call goes here — see "Backend integration".
        const res = await fetch("/api/auth/" + mode, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(values),
        });
        if (!res.ok) throw new Error("Authentication failed");
      }}
      onSocialLogin={(providerId, mode) => {
        console.log("social", providerId, mode);
      }}
    />
  );
}

export default App;

CSS: import @alzore16/ls-red/style.css once in your app. It ships inside the package — nothing to copy from this repository.

Public API

Everything is exported from the package root — never import internal paths like @alzore16/ls-red/src/... or @alzore16/ls-red/dist/....

| Export | Description | | ----------------- | ---------------------------------------------------------------- | | AuthContainer | The full-page auth layout (top bar, illustrations, auth card). | | AuthCard | The login/signup card (heading, fields, submit, social buttons). | | SocialButtons | Config-driven social login buttons. | | Illustrations | Decorative left/right SVG art + background image. | | theme / defaultTheme | The default theme configuration object. | | mergeTheme(base, override) | Deep-merges a partial override onto a config object. | | themeToCssVars(theme) | Flattens a config into CSS custom properties. | | authBackend | The default backend adapter object (see below). |

Props

AuthContainer

| Prop | Type | Description | | -------------------- | ----------------------------------- | ------------------------------------------------------------------ | | theme | DeepPartial<ThemeConfig> | Overrides, deep-merged over the default config. | | initialMode | "login" \| "signup" | Initial mode when mode is uncontrolled. Default "login". | | mode | "login" \| "signup" | Controlled mode. Omit to let the container manage its own state. | | onModeChange | (mode) => void | Called when the user switches login ↔ signup. | | onSubmit | (values, mode) => void \| Promise | Called after validation passes — your backend hook. | | onSocialLogin | (providerId, mode) => void | Called on a social provider click. |

AuthCard

Same props as AuthContainer minus the theme-override (it takes the full merged ThemeConfig). Used internally by AuthContainer.

Backend integration

The package contains no backend provider (no Supabase, Firebase, Auth0, Clerk, NextAuth, or custom API). The UI only defines an integration contract. Connect your own backend in two ways:

1. Props (recommended)

Pass onSubmit (and optionally onSocialLogin) to AuthContainer. They replace the default adapter entirely:

<AuthContainer
  onSubmit={async (values, mode) => {
    const res = await fetch("/api/auth/" + mode, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(values),
    });
    if (!res.ok) throw new Error("Invalid email or password");
    // ...store session, redirect, etc.
  }}
/>

Any thrown error aborts the submit (the button still shows its loading state while the promise is pending — implement your own error display via the returned promise).

2. The authBackend adapter object

The exported authBackend follows a documented contract:

interface AuthBackend {
  signup(data: SignupData): Promise<AuthResponse>;
  login(data: LoginData): Promise<AuthResponse>;
  logout(): Promise<AuthResponse>;
  forgotPassword(email: string): Promise<AuthResponse>;
  resetPassword(data: ResetPasswordData): Promise<AuthResponse>;
  socialLogin(provider: string): Promise<AuthResponse>;
}

• Resolve with { success: true, user, session } for success.
• Resolve with { success: false, error } or throw an Error to surface a failure.
• The demo stub in the package resolves with a fake success — replace it by providing the props above, or copy the adapter into your own module and implement each method against your API.

Security: never put backend credentials or service-role keys in the browser. Call your own API endpoints.

Customization

Every visual and textual value comes from the theme config. Pass partial overrides — they are deep-merged over the default:

import { AuthContainer } from "@alzore16/ls-red";

<AuthContainer
  theme={{
    colors: { primaryButtonBg: "#3B82F6", primaryButtonBgHover: "#1D4ED8" },
    copy: { login: { headingLine2: "Start Today" } },
    brand: { wordmark: "Acme" },
  }}
/>

The full config shape (ThemeConfig) is exported as a type: brand, topBarActions, illustrations, colors, typography, layout, copy, socialProviders, fields, validation. The background illustration ships bundled inside the package (inline) — no external asset paths required.

Supported React usage

• Vite / Create React App / Webpack / Rspack — any bundler that understands npm packages with exports.
• Next.js App Router — client components ("use client"); the theme is a full-page component.
• Remix / Astro / Gatsby — client-rendered auth pages.
• Works with TypeScript: component props, theme config and backend adapter types are all exported (autocomplete + type checking out of the box).

Styling notes

• Import @alzore16/ls-red/style.css exactly once in your app.
• The theme is designed as a full-viewport auth page (100dvh). Its CSS resets body margins, sets min-height: 100vh and overflow-x: hidden on html, body — if you embed it inside an existing page, scope it to a dedicated auth route.
• No fonts are bundled: the theme uses the Inter stack with system fallbacks. Load Inter yourself (e.g. Google Fonts) for the intended typography.
• Responsive: desktop/tablet show the full illustrated page; mobile hides the side illustrations and shows a compact hero strip — unchanged from the original theme.

TypeScript

The package ships with full type declarations (dist/index.d.ts), including:

• AuthContainerProps, AuthCardProps, SocialButtonsProps, IllustrationsProps
• ThemeConfig and all sub-config types, plus DeepPartial for overrides
• AuthUser, AuthResponse, SignupData, LoginData, ResetPasswordData, SocialProvider, AuthBackend

import { AuthContainer, type AuthContainerProps } from "@alzore16/ls-red";

const props: AuthContainerProps = {
  initialMode: "login",
  onSubmit: async (values, mode) => {
    /* ... */
  },
};

License

MIT