Account Chooser

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, avatar, avatar-initials dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/auth/auth7.tsx instead.

Usage

The file also exports auth7Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Auth7, auth7Demo } from "@/components/blocks/auth/auth7";

export default function Page() {
  return <Auth7 {...auth7Demo} />;
}

Props

Types

type SavedAccount = {
  name: string;
  email: string;
  avatar?: { src: string; alt: string };
  href?: string;
};

Behavior notes

• Each account row and the Use another account row render as real Next.js Link components via the button's render prop, but none of them navigate anywhere real by default (href defaults to "#").
• Avatars fall back to initials generated from the account's name whenever avatar.src is missing or fails to load, using the shared Avatar/AvatarFallback components.
• This block is a plain server component: rows are styled to look clickable and hoverable, but clicking one does not actually sign in as that account.