Components / Blocks / AuthCard
Auth
FreeBlockA provider-neutral authentication card with accessible credential fields and action slots.
Demo dataResponsive
Welcome back
Enter your credentials to continue.
Installation
pnpm dlx shadcn@latest add https://elements.micropreneur.dev/r/auth-card.jsonThe shadcn CLI writes the source into your project. Files added:
- components/blocks/auth-card.tsxblock
- components/ui/button.tsxui
- components/ui/card.tsxui
- components/ui/field.tsxui
- components/ui/input.tsxui
- lib/utils.tslib
Dependencies@base-ui/reactclass-variance-authorityclsxtailwind-merge
API
| Prop | Type | Default | Description |
|---|---|---|---|
| description | ReactNode | 'Enter your credentials to continue.' | |
| footer | ReactNode | — | |
| forgotPasswordHref | string | — | |
| heading | ReactNode | 'Welcome back' | |
| socialAction | ReactNode | — | |
| submitLabel | ReactNode | 'Sign in' |
Also accepts ComponentProps<'form'>.
Accessibility
- A native form with visible labels tied to the email and password inputs.
- Both inputs are required and set autoComplete, so browsers and password managers fill them.
- Server errors come from your auth adapter; show them in the form as text.