@alzore16/ls-nova — Nova

Nova — Fintech Dark/Light Split authentication theme (Login + Signup) for React. A config-driven, backend-agnostic auth UI: every color, font, spacing token, string, icon and image 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-nova

pnpm

pnpm add @alzore16/ls-nova

yarn

yarn add @alzore16/ls-nova

bun

bun add @alzore16/ls-nova

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

Basic usage

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

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

  return (
    <AuthSplitLayout
      theme={defaultTheme}
      mode={mode}
      onModeChange={setMode}
      onSubmit={async (values, mode) => {
        // Your auth call goes here — see "Backend integration".
        console.log(mode, values);
      }}
      onForgotPassword={(email) => console.log("reset", email)}
    />
  );
}

export default App;

CSS: import @alzore16/ls-nova/style.css once in your app (e.g. in your root layout). 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-nova/src/... or @alzore16/ls-nova/dist/....

| Export | Description | | ------------------------- | ---------------------------------------------------------------------- | | AuthSplitLayout | Full-page login/signup split layout (hero panel + form panel). | | AuthCard | The form card (heading, fields, validation, submit, footer). | | HeroPanel | The left promotional panel. | | 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. | | loginUser, registerUser, logoutUser, forgotPassword, getCurrentUser, refreshSession | Backend adapter functions (see below). |

Props

AuthSplitLayout

| 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 layout manage its own state. | | onModeChange | (mode) => void | Called when the user switches login ↔ signup. | | onSubmit | (values, mode) => void \| Promise | Called after validation passes. Replaces the backend adapter. | | onForgotPassword | (email) => void | Called on "Forgot password?". Replaces the backend adapter. |

AuthCard

Same props as AuthSplitLayout (minus theme overrides — it takes the full merged ThemeConfig). Used internally by AuthSplitLayout.

Backend integration

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

1. Props (recommended for the component API)

Pass onSubmit (and optionally onForgotPassword) to AuthSplitLayout. They replace the default adapter entirely:

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

Any thrown error is shown to the user inside the form.

2. The adapter contract

The exported functions (loginUser, registerUser, …) follow this contract — every function returns Promise<AuthResult>:

type AuthResult =
  | { success: true; user: AuthUser; session: AuthSession }
  | { success: false; error: string };

You can re-implement the adapter functions in your own module (importing the types from the package) and pass them through — or use them as the shape reference for your backend calls.

Customization

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

import { AuthSplitLayout } from "@alzore16/ls-nova";

<AuthSplitLayout
  theme={{
    colors: { primaryButtonGradientStart: "#3B82F6", primaryButtonGradientEnd: "#1D4ED8" },
    copy: { login: { viewHeading: "Welcome back to Acme" } },
    brand: { wordmark: "Acme" },
  }}
/>

The full config shape (ThemeConfig) is exported as a type: hero, brand, modeSwitch, colors, typography, layout, copy, footerLinks, fields, validation, motion. See the config reference in the source package for the complete token list.

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-nova/style.css exactly once in your app.
• The theme is designed as a full-viewport auth page (100dvh). Its CSS resets body margins and sets 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 ≥1200px (side-by-side), tablet 768–1199px, mobile ≤767px (auth-only, promo panel removed) — unchanged from the original theme.

TypeScript

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

• AuthSplitLayoutProps, AuthCardProps, HeroPanelProps
• ThemeConfig and all sub-config types, plus DeepPartial for overrides
• AuthUser, AuthSession, AuthResult, and the adapter function signatures

import { AuthSplitLayout, type AuthSplitLayoutProps } from "@alzore16/ls-nova";

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

License

MIT