Auth Card

Centered Tailwind sign in card with a title, optional description, a slot for fields and providers, and a divided footer for sign up or reset links.

src/registry/ui/auth-card.tsx/r/auth-card.json

Installation#

bash
npx shadcn@latest add @minidev/auth-card

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/auth-card.json

Usage#

tsx
import { AuthCard } from "@/components/ui/auth-card"

export function Example() {
  return (
    <AuthCard title="Sign in" footer={<>No account? <a className="text-accent underline underline-offset-2" href="#">Sign up</a></>}>
      <SocialAuthRow />
      <FormField id="email" label="Email"><Input id="email" type="email" placeholder="you@company.com" /></FormField>
      <FormField id="password" label="Password"><Input id="password" type="password" /></FormField>
      <Button className="w-full">Continue</Button>
    </AuthCard>
  )
}

API reference#

AuthCard props
PropTypeDefault
titleReact.ReactNode"Sign in"
descriptionReact.ReactNode-
footerReact.ReactNode-
childrenReact.ReactNode-
classNamestring-

Examples#

All login and signup components

Learn more