Pixelkit Sign InNew

When to use

• Passwordless sign-in: providers first, then a magic link by email
• A product with a strong app icon that can carry the page on its own

When not to use

• Flows that need a password field — there is none
• Dark sites; it is drawn for white

Installation

Add Pixelkit Sign In with the shadcn CLI — it writes the files into components/blocx/ and installs what they import — or copy it in by hand.

Requires React 19 · Next.js (it loads its fonts with next/font) · motion.

pnpm dlx shadcn@latest add "https://www.pinui.xyz/r/blocx/pixelkit-sign-in.json"

Usage

import PixelkitSignIn from "@/components/blocx/PixelkitSignIn";

export default function Page() {
  return (
    <PixelkitSignIn
      onSubmit={async (email) => {
        await sendMagicLink(email);
      }}
      onProvider={(provider) => signInWith(provider)}
    />
  );
}

API reference

PixelkitSignIn

The brand name, the copy and the terms links are written in PixelkitSignIn.tsx; the tile's colour is --pksi-lime and the mark is the four rects in Logo().

Accessibility

• The section is labelled by its title; the email field has a real label, visually hidden, and the browser validates it
• The tile's mark is an image named Pixelkit; the "or" rule is hidden from screen readers
• The submit button's label is a polite live region as it changes

Motion

• The tile drops in on a spring and its four pixels pop in one after another, the rounded last one with a little overshoot
• Each row rises and un-blurs on a stagger; the button rolls its label through Sending link… and Check your inbox
• Reduced motion drops the travel and keeps the fades

Responsive behavior

• One 340px column centred in the window; the three providers share its width on any phone
• On a window shorter than 640px the tile shrinks and the gaps tighten so it still fits