Sign-in

Authentication card with GitHub provider plus email and password. Drop into the auth route and wire to your backend.

Overview

A focused sign-in surface composed from Card, Button, Separator, Label, and Input. The card frames a social-provider button above a divider and an email/password field group, with a primary submit and a sign-up link in the footer.

Use this block as the starting point for any auth route. Swap the GitHub button for any OAuth provider, or stack multiple providers above the divider.

Preview

Welcome back

Password

Don't have an account?

Anatomy

SignIn
└─ Card
   ├─ CardHeader           CardTitle (Welcome back) + CardDescription
   ├─ CardContent
   │  ├─ Button outline    GitHub provider (lucide icon)
   │  ├─ Separator         "or" divider
   │  ├─ Label + Input     email
   │  └─ Label + Input     password (+ Forgot password link)
   └─ CardFooter           Button (Sign in) + "Create one" link

Installation

npx gremorie@latest add block-sign-in

pnpm dlx gremorie@latest add block-sign-in

yarn dlx gremorie@latest add block-sign-in

bunx --bun gremorie@latest add block-sign-in

Code

'use client';

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
  Separator,
} from '@gremorie/rx-display';
import { Button, Input, Label } from '@gremorie/rx-forms';
import { Github } from 'lucide-react';

export function SignIn() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Welcome back</CardTitle>
        <CardDescription>Sign in to your Gremorie account</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        <Button variant="outline" className="w-full">
          <Github aria-hidden="true" />
          Continue with GitHub
        </Button>
        <div className="relative flex items-center">
          <Separator className="flex-1" />
          <span className="mx-3 text-xs uppercase tracking-wider text-muted-foreground">
            or
          </span>
          <Separator className="flex-1" />
        </div>
        <div className="flex flex-col gap-2">
          <Label htmlFor="signin-email">Email</Label>
          <Input
            id="signin-email"
            type="email"
            placeholder="you@example.com"
            autoComplete="email"
          />
        </div>
        <div className="flex flex-col gap-2">
          <div className="flex items-center justify-between">
            <Label htmlFor="signin-password">Password</Label>
            <a
              href="#"
              className="text-xs text-muted-foreground underline-offset-4 hover:underline"
            >
              Forgot password?
            </a>
          </div>
          <Input
            id="signin-password"
            type="password"
            autoComplete="current-password"
          />
        </div>
      </CardContent>
      <CardFooter className="flex flex-col gap-3">
        <Button className="w-full">Sign in</Button>
        <p className="text-center text-xs text-muted-foreground">
          Don&apos;t have an account?{' '}
          <a
            href="#"
            className="text-foreground underline-offset-4 hover:underline"
          >
            Create one
          </a>
        </p>
      </CardFooter>
    </Card>
  );
}

The Angular edition of this component is planned; the React edition is production-ready today.

Customization

Stack additional OAuth providers above the divider (Google, GitLab, SSO)
Swap the GitHub button for a passkey button when WebAuthn is wired
Add a "Remember me" checkbox between the password field and the submit
Replace the anchors with a router link from your framework (Next.js, TanStack)