Manicat UI

Centered login

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

Preview
Centered login preview
Manicat UI

No account?

Sign in to Manicat UI

Use the passkey saved on this device. No password needed.

or

shadcn CLI

Also installs (4)

  • manicat-foundation
  • button
  • input
  • otp-input
Manual install(+)
registry.jsonjson
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "login-centered",
  "type": "registry:block",
  "title": "Centered login",
  "description": "A passkey-first login card on a quiet ring backdrop that morphs through email and code.",
  "categories": [
    "blocks"
  ],
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "https://manicat.viraza.net/r/manicat-foundation.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/login-centered/login-centered.tsx",
      "type": "registry:component",
      "target": "@components/manicat/blocks/login-centered/login-centered.tsx"
    },
    {
      "path": "registry/blocks/login-centered/login-centered.module.css",
      "type": "registry:component",
      "target": "@components/manicat/blocks/login-centered/login-centered.module.css"
    },
    {
      "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"
    }
  ],
  "docs": "Docs and live preview: https://uiarc.dev/components/blocks/login-centered",
  "meta": {
    "tier": "free",
    "kind": "block",
    "docs": "https://manicat.viraza.net/components/blocks/login-centered",
    "markdown": "https://uiarc.dev/components/blocks/login-centered/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 { LoginCentered } from "manicat/registry/blocks/login-centered/login-centered";

export function LoginCenteredExample() {
  return <LoginCentered />;
}

Examples

Real screens rather than isolated props. Switch to Code to copy a whole example into your project.

Centered login page A full login screen with terms and privacy links.

Centered login page A full login screen with terms and privacy links. preview
Manicat UI

No account?

Sign in to Manicat UI

Use the passkey saved on this device. No password needed.

or