Centered login

A passkey-first login card on a quiet ring backdrop that morphs through email and code.

$npx shadcn@latest add @silicon-ui/login-centered

Installation

$npx shadcn@latest add @silicon-ui/login-centered

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/blocks/login-centered/login-centered.tsx
- components/silicon-ui/blocks/login-centered/login-centered.module.css
- components/silicon-ui/otp-input/otp-input.tsx shared
- components/silicon-ui/otp-input/otp-input.module.css shared
- components/silicon-ui/input/input.tsx shared
- components/silicon-ui/input/input.module.css shared
- components/silicon-ui/button/button.tsx shared
- components/silicon-ui/button/button.module.css shared
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { LoginCentered } from "@/components/silicon-ui/blocks/login-centered/login-centered";

Prop	Type	Default
`demoCode` The code the simulated email contains.	`string`	`"482913"`
`fullScreen` Fill the viewport (100dvh, no frame) when the block is the whole page.	`boolean`	`false`
`demoEmail` The account a simulated passkey or single sign-on resolves to.	`string`	`"maya@northwind.studio"`
`termsHref`	`string`	`"#terms"`
`privacyHref`	`string`	`"#privacy"`
`onSignIn` Called once the simulated sign in or sign up succeeds.	`(email: string, method: LoginMethod, mode: Mode) => void`	—
`className`	`string`	—