The preview simulates submission only. Connect onSubmit to your authentication service and onProvider to your OAuth flow. Never place provider secrets in client code. Errors thrown by onSubmit are shown by the form.
Installation
$pnpm dlx shadcn@latest add https://your-docs-domain.com/r/auth-silk.json
Usage
"use client"
import { AuthSilk } from "@/components/blocks/auth-silk"
export default function Demo() {
return (
<div className="w-full overflow-hidden rounded-3xl">
<AuthSilk
onSubmit={async () => {
await new Promise((resolve) => setTimeout(resolve, 800))
}}
/>
</div>
)
}
API
| Property | Type | Description |
|---|
onSubmit? | (values: { email: string }) => Promise<void> | void | sends the magic link; throw to show an error under the field |
onProvider? | (provider: Provider) => void | The on provider option. |
className? | string | The class name option. |
Standard element attributes are supported where the props extend a React element type. Required properties appear without a question mark.
Dependencies
lucide-react, motion
Its icons come from animate-ui and install with the component.
Shared local files are included in the Code panel. See project setup for Tailwind, path aliases, and theme tokens.