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-glass.json
Usage
"use client"
import { AuthGlass } from "@/components/blocks/auth-glass"
export default function Demo() {
return (
<div className="w-full overflow-hidden rounded-3xl">
<AuthGlass
onSubmit={async () => {
await new Promise((resolve) => setTimeout(resolve, 800))
}}
/>
</div>
)
}
API
| Property | Type | Description |
|---|
onSubmit? | (values: Credentials) => Promise<void> | void | The on submit option. |
onProvider? | (provider: Provider) => void | The on provider option. |
background? | React.ReactNode | what the glass sits on; defaults to layered dusk waves |
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.