{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "user-view",
  "title": "User View",
  "description": "Renders a user view that shows the user's avatar alongside their name and email.",
  "dependencies": [
    "@better-auth-ui/core@latest",
    "@better-auth-ui/react@latest",
    "better-auth",
    "cn",
    "lucide-react"
  ],
  "registryDependencies": [
    "avatar",
    "https://better-auth-ui.com/r/radix-nova/user-avatar.json",
    "skeleton"
  ],
  "files": [
    {
      "path": "examples/start-shadcn-example/src/components/auth/user/user-avatar.tsx",
      "content": "\"use client\"\n\nimport type { UsernameAuthClient } from \"@better-auth-ui/core/plugins/username\"\nimport { useAuth, useSession } from \"@better-auth-ui/react\"\nimport type { User } from \"better-auth\"\nimport { User2 } from \"lucide-react\"\nimport type { ReactNode } from \"react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Skeleton } from \"@/components/ui/skeleton\"\nimport { cn } from \"cn\"\n\nexport type UserAvatarProps = {\n  className?: string\n  fallback?: ReactNode\n  isPending?: boolean\n  /** @remarks `User` */\n  user?: User & { username?: string | null; displayUsername?: string | null }\n}\n\n/**\n * Display a user's avatar using session information or an explicit user prop.\n *\n * Renders a circular avatar that shows the user's image when available, a fallback node if provided, or the user's first two initials; while the session is loading (or when `isPending` is true) and no `user` prop is supplied, renders a skeleton placeholder.\n *\n * @param className - Additional CSS classes applied to the avatar container\n * @param user - Optional user object to display instead of the session user\n * @param isPending - When true, treat the component as loading and show the skeleton if no `user` is provided\n * @param fallback - Node to render inside the avatar fallback area before initials or the default icon\n * @returns The avatar element to render (JSX)\n */\nexport function UserAvatar({\n  className,\n  user,\n  isPending,\n  fallback\n}: UserAvatarProps) {\n  const { authClient } = useAuth<UsernameAuthClient>()\n  const { data: session, isPending: sessionPending } = useSession(authClient, {\n    enabled: !user && !isPending\n  })\n\n  if ((isPending || sessionPending) && !user) {\n    return <Skeleton className={cn(\"size-8 rounded-full\", className)} />\n  }\n\n  const resolvedUser = user ?? session?.user\n\n  const initials = (\n    resolvedUser?.username ||\n    resolvedUser?.name ||\n    resolvedUser?.email\n  )\n    ?.slice(0, 2)\n    .toUpperCase()\n\n  return (\n    <Avatar\n      className={cn(\n        \"size-8 bg-muted text-foreground text-sm rounded-full\",\n        className\n      )}\n    >\n      <AvatarImage\n        src={resolvedUser?.image ?? undefined}\n        alt={\n          resolvedUser?.displayUsername ||\n          resolvedUser?.name ||\n          resolvedUser?.email\n        }\n      />\n\n      <AvatarFallback className=\"text-muted-foreground!\">\n        {fallback || initials || <User2 className=\"size-4\" />}\n      </AvatarFallback>\n    </Avatar>\n  )\n}\n",
      "type": "registry:component",
      "target": "@components/auth/user/user-avatar.tsx"
    },
    {
      "path": "examples/start-shadcn-example/src/components/auth/user/user-view.tsx",
      "content": "\"use client\"\n\nimport type { UsernameAuthClient } from \"@better-auth-ui/core/plugins/username\"\nimport { useAuth, useSession } from \"@better-auth-ui/react\"\nimport type { User } from \"better-auth\"\n\nimport { Skeleton } from \"@/components/ui/skeleton\"\nimport { cn } from \"cn\"\nimport { UserAvatar } from \"./user-avatar\"\n\nexport type UserViewProps = {\n  className?: string\n  isPending?: boolean\n  /**\n   * When true, the subtitle line (email when name/username is shown) is hidden.\n   * @default false\n   */\n  hideSubtitle?: boolean\n  /** @remarks `User` */\n  user?: Partial<User> & {\n    username?: string | null\n    displayUsername?: string | null\n  }\n}\n\n/**\n * Render a compact user item with an avatar, a primary label (display username, name, or email), and an optional subtitle (email).\n *\n * @param isPending - If true and no `user` prop is provided, renders a loading skeleton instead of user details\n * @param className - Additional CSS classes applied to the outer container\n * @param hideSubtitle - When true, omits the muted subtitle row under the primary label\n * @param user - Optional user object to display; when omitted the current session user is used\n * @returns A React element showing the user's avatar with their identifying information\n */\nexport function UserView({\n  className,\n  isPending,\n  hideSubtitle = false,\n  user\n}: UserViewProps) {\n  const { authClient } = useAuth<UsernameAuthClient>()\n  const { data: session, isPending: sessionPending } = useSession(authClient, {\n    enabled: !user && !isPending\n  })\n\n  const resolvedUser = user ?? session?.user\n\n  if ((isPending || sessionPending) && !user) {\n    return (\n      <div className={cn(\"flex items-center gap-2 min-w-0\", className)}>\n        <UserAvatar isPending />\n\n        <div className=\"grid flex-1 gap-1 text-left text-sm\">\n          <Skeleton className=\"h-4 w-24\" />\n\n          {!hideSubtitle && <Skeleton className=\"h-3 w-32\" />}\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className={cn(\"flex items-center gap-2 min-w-0\", className)}>\n      <UserAvatar user={resolvedUser as User | undefined} />\n\n      <div className=\"grid min-w-0 flex-1 text-left text-sm leading-tight\">\n        <span className=\"truncate font-medium text-foreground\">\n          {resolvedUser?.displayUsername ||\n            resolvedUser?.name ||\n            resolvedUser?.email}\n        </span>\n\n        {!hideSubtitle &&\n          (resolvedUser?.displayUsername || resolvedUser?.name) && (\n            <span className=\"text-muted-foreground truncate text-xs\">\n              {resolvedUser?.email}\n            </span>\n          )}\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "@components/auth/user/user-view.tsx"
    }
  ],
  "type": "registry:component"
}