# Two Factor 4

A shadcn/ui block from the [@diarmuradi](https://diarmuradi.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/diarmuradi/two-factor-4).

- Page, with a live preview: https://shadcn.exchange/r/diarmuradi/two-factor-4
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/diarmuradi/two-factor-4-light-304449aa7d769e76.png
- Registry item: https://diarmuradi.com/r/two-factor-4.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://diarmuradi.com/r/two-factor-4.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `input-otp`, `lucide-react`
- Registry items: `https://diarmuradi.com/r/styles/base-nova/button.json`, `https://diarmuradi.com/r/styles/base-nova/fancy-button.json`, `https://diarmuradi.com/r/styles/base-nova/field.json`, `https://diarmuradi.com/r/styles/base-nova/icons.json`, `https://diarmuradi.com/r/styles/base-nova/input-group.json`, `https://diarmuradi.com/r/styles/base-nova/input-otp.json`

## Files

### `two-factor.tsx`

```tsx
"use client"

import { useId } from "react"
import Link from "next/link"
import { REGEXP_ONLY_DIGITS } from "input-otp"

import { Button } from "@/components/ui/button"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from "@/components/ui/input-group"
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from "@/components/ui/input-otp"
import { FancyButton } from "@/components/ui/fancy-button"
import { Icons } from "@/components/ui/icons"
import { CopyIcon } from 'lucide-react'

export function TwoFactor() {
  const id = useId()

  return (
    <main
      aria-label="Two-factor authentication"
      className="flex w-full max-w-sm flex-col items-center gap-4 text-foreground motion-reduce:**:animate-none motion-reduce:**:transition-none"
    >
      <FancyButton
        size="icon-lg"
        aria-label="Home"
        role="link"
        className="size-14 rounded-xl"
        render={<Link href="/" />}
      >
        <Icons.Logo aria-hidden="true" className="size-10" />
      </FancyButton>

      <div className="flex w-full flex-col gap-6 rounded-4xl bg-card p-6 shadow-elevated-lg">
        <div className="text-center">
          <h1 className="text-xl font-semibold tracking-tight text-balance sm:text-2xl">
            Two-factor authentication
          </h1>
          <p className="text-base text-muted-foreground">
            Scan with your authenticator app, then confirm with a code.
          </p>
        </div>

        <div className="flex items-start gap-4">
          <div className="relative shrink-0 p-1">
            <div className="size-28 overflow-hidden rounded-xl bg-background p-1.5 shadow-elevated-sm sm:size-32">
              <Icons.QrCode aria-hidden="true" className="size-full" />
            </div>
            <span className="pointer-events-none absolute top-0 left-0 size-4 border-t border-l border-border/50" />
            <span className="pointer-events-none absolute top-0 right-0 size-4 border-t border-r border-border/50" />
            <span className="pointer-events-none absolute bottom-0 left-0 size-4 border-b border-l border-border/50" />
            <span className="pointer-events-none absolute right-0 bottom-0 size-4 border-r border-b border-border/50" />
          </div>
          <div className="flex min-w-0 flex-1 flex-col gap-2">
            <p className="text-sm leading-snug text-muted-foreground">
              Can&apos;t scan? Enter code manually:
            </p>
            <InputGroup className="h-10 bg-transparent">
              <InputGroupInput
                readOnly
                aria-label="Authenticator setup key"
                value="2FAK-9X7Y-4Z3W-1Q8P"
                className="bg-transparent font-mono text-xs"
              />
              <InputGroupAddon align="inline-end">
                <InputGroupButton
                  type="button"
                  size="icon-xs"
                  aria-label="Copy setup key"
                >
                  <CopyIcon  aria-hidden="true" />
                </InputGroupButton>
              </InputGroupAddon>
            </InputGroup>
          </div>
        </div>

        <FieldGroup className="gap-3">
          <Field className="gap-1">
            <FieldLabel htmlFor={`${id}-code`} className="sr-only">
              Authentication code
            </FieldLabel>
            <InputOTP
              id={`${id}-code`}
              inputMode="numeric"
              className="bg-transparent"
              maxLength={4}
              pattern={REGEXP_ONLY_DIGITS}
              containerClassName="w-full"
            >
              <InputOTPGroup className="flex w-full gap-2 *:aspect-square *:h-auto *:min-h-0 *:flex-1 *:rounded-xl *:border-l *:bg-transparent *:text-lg md:*:rounded-2xl md:*:text-2xl *:[&_.cn-input-otp-caret-line]:h-[1em] md:*:[&_.cn-input-otp-caret-line]:h-[1.25em]">
                <InputOTPSlot index={0} />
                <InputOTPSlot index={1} />
                <InputOTPSlot index={2} />
                <InputOTPSlot index={3} />
              </InputOTPGroup>
            </InputOTP>
          </Field>

          <FancyButton type="button" size="lg" className="w-full">
            Enable 2FA
          </FancyButton>
        </FieldGroup>
      </div>

      <Button
        variant="link"
        className="h-auto p-0"
        nativeButton={false}
        role="link"
        render={<Link href="/recovery-code" />}
      >
        Use a recovery code
      </Button>
    </main>
  )
}
```