User Account Avatar

Renders a user account avatar with profile options. Displays user details and allows editing profile or viewing orders. Shows a popover with interactive sections. Use when needing a user account interface with basic actions.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/user-account-avatar

npx layro-cli add @educlopez/user-account-avatar

npx layro-cli add @educlopez/user-account-avatar

bunx layro-cli add @educlopez/user-account-avatar

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import {
  Content as PopoverContent,
  Portal as PopoverPortal,
  Root as PopoverRoot,
  Trigger as PopoverTrigger,
} from "@radix-ui/react-popover";
import SmoothButton from "@/components/smoothui/smooth-button";
import { cn } from "@/lib/utils";
import { Eye, Package, User } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { Fragment, useState } from "react";