Overview
A functional multi-step sign-in form using Clerk Core 3's useSignIn() hook. Supports email/password authentication and optional social OAuth buttons with smooth step transitions.
Installation
npx shadcn@latest add "https://elements.crfrst.dev/r/clerk-sign-in"Usage
import { ClerkSignIn } from "@/components/elements/clerk-sign-in";
export default function LoginPage() {
return <ClerkSignIn redirectUrl="/dashboard" />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
heading | string | "Sign in" | Form heading |
subheading | string | "Welcome back" | Subheading text |
showOAuth | boolean | true | Show social login buttons |
showSeparator | boolean | true | Show "or continue with" divider |
redirectUrl | string | "/" | Where to redirect after sign in |
signUpUrl | string | "/sign-up" | Link to sign up page |
afterSSOUrl | string | "/sso-callback" | OAuth callback page URL |
Features
- Multi-step form (email -> password)
- Social OAuth buttons (Google, GitHub, Apple)
- Forgot password link
- Smooth step transitions
- Inline error display from Clerk API
- Loading states via
fetchStatus