Tween UITween UI
7

Components

Auth Modal

A sign-in dialog that fades the backdrop, then scales the panel in with staggered content.

A sign-in modal: the backdrop fades, the panel scales up, then the close button, title, providers, and email field stagger in. Close with the X, the backdrop, or Escape — the exit plays in reverse. Driven by GSAP.

New tab

Installation

pnpm dlx shadcn@latest add @tween-ui/auth-modal

Usage

app/page.tsx
app/page.tsx
import { useState } from 'react';
import AuthModal from '@/components/tweenui/modal/auth-modal';
 
export default function Page() {
  const [open, setOpen] = useState(false);
 
  return (
    <>
      <button type="button" onClick={() => setOpen(true)}>
        Sign in
      </button>
      <AuthModal open={open} onClose={() => setOpen(false)} />
    </>
  );
}

Props

PropTypeDefaultDescription
openboolean—Whether the dialog is shown.
onClose() => void—Called after the exit animation finishes.
onProvider(id: string) => void—Fires when a provider button is clicked.
onEmail(email: string) => void—Fires with the email on form submit.

Accessibility

The dialog uses role="dialog" and aria-modal. Escape, the close button, and the backdrop all dismiss it. Under prefers-reduced-motion: reduce the panel appears and disappears with no scale or stagger.