Two-factor setup
A setting that opens a QR code and code field in place, moves the rows below out of the way, and folds back to one line once it's on.
Two-factor authenticationAsk for a code when signing in
Sign-in alertsEmail me about new devices
Things to try
- Switch two-factor on. The setup opens between the rows and "Sign-in alerts" steps down to make room.
- Type any six digits, or paste them. Once the code is full it's accepted, and the setup folds into "On · Authenticator app".
- Switch it off. Everything returns to where it was.
Install
npx shadcn@latest add https://your-docs-site/r/two-factor.jsonDependencies
npm install @base-ui/react @hugeicons/core-free-icons @hugeicons/react @remold-ui/react motionHow it works
- The setup unfolds by its height. Motion springs it from nothing to its natural height with just a touch of give, so "Sign-in alerts" is pushed down smoothly rather than jumping. What's inside fades in once there's room for it. Closing runs the other way: the contents fade out first, and only then does the box fold, so its shrinking edge never cuts through the code or the QR. The box only ever changes height, so no words stretch.
- The status line swaps in place. "Ask for a code when signing in" lifts away as "On · Authenticator app" settles in.
- The switches slide. Each knob is a Base UI Switch thumb that Motion springs along its track, so it slides to the other end instead of jumping there, and the track's colour fades with it.
- The code boxes sit over one real input, so typing, pasting and one-time-code autofill all work as usual.
- The QR code is drawn. Put your real one in its place.
Task list
Issues grouped by status, with Done folded. A completed issue's ID travels into the folded row, and opening Done spreads them back out into rows.
Usage meter
A plan's usage on a billing page: bars fill as the month goes on, turn amber when you're running low and red once you're over, and upgrading makes every bar spring back down.