meowerse_
docs menu

RecoveryCodes

A grid of one-time recovery codes with a "copy all" button.

import { RecoveryCodes } from "@meowerse/ui"; · source packages/ui/src/components/RecoveryCodes.tsx

variants and states

  • b7qk-2m9x
  • t4nw-8rd3
  • h2vc-6yp1
  • m9zs-4kt7
  • q3lf-7bn2
  • w8xd-1gj5
  • e6pr-3hm8
  • u1ty-9cs4
eight codes

try it

  • b7qk-2m9x
  • t4nw-8rd3
  • h2vc-6yp1
  • m9zs-4kt7
  • q3lf-7bn2
  • w8xd-1gj5
  • e6pr-3hm8
  • u1ty-9cs4
demo source
tsx
import { RecoveryCodes } from "@meowerse/ui";

export default function Demo() {
  return <div className="demo"><RecoveryCodes codes={["b7qk-2m9x", "t4nw-8rd3", "h2vc-6yp1", "m9zs-4kt7", "q3lf-7bn2", "w8xd-1gj5", "e6pr-3hm8", "u1ty-9cs4"]} /></div>;
}

props

proptypedefaultrequired
codesstring[] the codes to show, exactly as issued.—yes
classNamestring extra class names to append.—no

css custom properties

variabledarklight
--c-line#232326#cfcec8
--font-mono"JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SFMono-Regular", Menlo, monospacesame
--fs-30.875remsame
--r-m4pxsame
--sp-28pxsame
--sp-312pxsame

Classes: .mw-recovery. Set any of these variables on an ancestor (or wrap a subtree in .mw-theme--dark / .mw-theme--light) to restyle just that part of a page.

usage

eight codes

tsx
import { RecoveryCodes } from "@meowerse/ui";

<RecoveryCodes codes={["b7qk-2m9x","t4nw-8rd3","h2vc-6yp1","m9zs-4kt7","q3lf-7bn2","w8xd-1gj5","e6pr-3hm8","u1ty-9cs4"]} />

accessibility

  • The codes are a list, shown exactly as issued.
  • "copy all" gives no feedback yet (audit U-19); that is fixed in the accounts redesign (sub-project 3).

do and don't

do

  • Show codes once, right after they are made, and say they won't be shown again.

don't

  • Don't send codes by email or show them again later.