Sign in

A sign in card that morphs from email to a six digit code to your account.

$npx shadcn@latest add @silicon-ui/sign-in

Installation

$npx shadcn@latest add @silicon-ui/sign-in

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/sign-in/sign-in.tsx
- components/silicon-ui/blocks/sign-in/sign-in.module.css
- components/silicon-ui/lib/media.ts shared
- 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
- components/silicon-ui/avatar/avatar.tsx shared
- components/silicon-ui/avatar/avatar.module.css shared
- components/silicon-ui/lib/silicon-provider.tsx shared
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { SignIn } from "@/components/silicon-ui/blocks/sign-in/sign-in";

Prop	Type	Default
`demoCode` The code the simulated email contains.	`string`	`"123456"`
`onSignIn` Called once the simulated sign in succeeds.	`(account: SignInAccount, method: SignInMethod) => void`	—