Isometric One-Time Code

About this piece

Isometric One-Time Code

A phone on a desk stand asks for a verification code: four keys light up in the accent color one after another, the code boxes fill, and the padlock badge turns into a check as the boxes take an accent outline. A security key lies on the base beside the stand.

Usage

The import and the props worth knowing about, in one place.

import { Isometric195 } from "@/components/beste/piece/isometric195";

// Give it the card's media area; the drawing scales to fit and centers itself.
// palette: "theme" | "light" | "dark" | "tone" | "glass" (see-through, for a photo or gradient behind it), accent={false} for one color.
<div className="flex aspect-square flex-col overflow-hidden rounded-3xl border border-border bg-card">
  <Isometric195 tone="color" color="#2F6FED" palette="theme" className="min-h-0 flex-1" />
  <p className="px-8 pb-8 text-center text-lg text-muted-foreground">
    Verify every sign in with a one-time code.
  </p>
</div>

More Isometric pieces

View all Isometric