Sign in
A sign in card that morphs from email to a six digit code to your account.
Preview
Sign in preview
Live · keyboard ready
shadcn CLI
Also installs (5)
- manicat-foundation
- avatar
- button
- input
- otp-input
Manual install(+)
registry.jsonjson
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "sign-in",
"type": "registry:block",
"title": "Sign in",
"description": "A sign in card that morphs from email to a six digit code to your account.",
"categories": [
"blocks"
],
"dependencies": [
"lucide-react",
"motion"
],
"registryDependencies": [
"https://manicat.viraza.net/r/manicat-foundation.json",
"https://manicat.viraza.net/r/avatar.json",
"https://manicat.viraza.net/r/button.json",
"https://manicat.viraza.net/r/input.json",
"https://manicat.viraza.net/r/otp-input.json"
],
"files": [
{
"path": "registry/blocks/sign-in/sign-in.tsx",
"type": "registry:component",
"target": "@components/manicat/blocks/sign-in/sign-in.tsx"
},
{
"path": "registry/blocks/sign-in/sign-in.module.css",
"type": "registry:component",
"target": "@components/manicat/blocks/sign-in/sign-in.module.css"
},
{
"path": "lib/media.ts",
"type": "registry:lib",
"target": "@components/manicat/lib/media.ts"
},
{
"path": "registry/components/otp-input/otp-input.tsx",
"type": "registry:component",
"target": "@components/manicat/otp-input/otp-input.tsx"
},
{
"path": "registry/components/otp-input/otp-input.module.css",
"type": "registry:component",
"target": "@components/manicat/otp-input/otp-input.module.css"
},
{
"path": "registry/components/input/input.tsx",
"type": "registry:component",
"target": "@components/manicat/input/input.tsx"
},
{
"path": "registry/components/input/input.module.css",
"type": "registry:component",
"target": "@components/manicat/input/input.module.css"
},
{
"path": "registry/components/button/button.tsx",
"type": "registry:component",
"target": "@components/manicat/button/button.tsx"
},
{
"path": "registry/components/button/button.module.css",
"type": "registry:component",
"target": "@components/manicat/button/button.module.css"
},
{
"path": "registry/components/avatar/avatar.tsx",
"type": "registry:component",
"target": "@components/manicat/avatar/avatar.tsx"
},
{
"path": "registry/components/avatar/avatar.module.css",
"type": "registry:component",
"target": "@components/manicat/avatar/avatar.module.css"
}
],
"docs": "Docs and live preview: https://uiarc.dev/components/blocks/sign-in",
"meta": {
"tier": "free",
"kind": "block",
"docs": "https://manicat.viraza.net/components/blocks/sign-in",
"markdown": "https://uiarc.dev/components/blocks/sign-in/markdown"
}
}Usage
Install the component, then copy this into your app. Change the content and the props to fit your screen.
example.tsxtsx
"use client";
import { SignIn } from "manicat/registry/blocks/sign-in/sign-in";
export function SignInExample() {
return <SignIn />;
}
Examples
Real screens rather than isolated props. Switch to Code to copy a whole example into your project.
Sign in Email code, passkey and providers in one card; onSignIn receives the account and the method used.
Sign in
Email code, passkey and providers in one card; onSignIn receives the account and the method used. preview
Live · keyboard ready
sign-in-email-code-passkey-and-providers-in-one-card-onsignin-receives-the-account-and-the-method-used-.tsxtsx
"use client";
import { useState } from "react";
import { SignIn } from "manicat/registry/blocks/sign-in/sign-in";
export function SignInAccountExample() {
const [last, setLast] = useState<string | null>(null);
return (
<div className="grid w-full gap-3">
<SignIn onSignIn={(account, method) => setLast(`${account.name} signed in with ${method}`)} />
{last && <p className="text-center text-sm text-(color:--text-muted)">{last}</p>}
</div>
);
}