@chakra-ui/avatar
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.1 • Public • Published

    @chakra-ui/avatar

    The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.

    Installation

    yarn add @chakra-ui/avatar
    
    # or
    
    npm i @chakra-ui/avatar

    Import components

    import { Avatar, AvatarGroup } from "@chakra-ui/avatar"

    Basic Usage

    Simply import the Avatar component and pass it the image src and name of the user in the avatar.

    <Avatar src="john-doe.png" name="John doe" />

    Stack Avatars in a group by using the AvatarGroup component

    <AvatarGroup size="md" max={2}>
      <Avatar name="Ryan Florence" src="https://bit.ly/ryan-florence" />
      <Avatar name="Segun Adebayo" src="https://bit.ly/sage-adebayo" />
      <Avatar name="Kent Dodds" src="https://bit.ly/kent-c-dodds" />
      <Avatar name="Prosper Otemuyiwa" src="https://bit.ly/prosper-baba" />
      <Avatar name="Christian Nwamba" src="https://bit.ly/code-beast" />
    </AvatarGroup>

    Install

    npm i @chakra-ui/avatar

    DownloadsWeekly Downloads

    162,313

    Version

    1.3.1

    License

    MIT

    Unpacked Size

    64.2 kB

    Total Files

    17

    Last publish

    Collaborators

    • segunadebayo
    • _codebender828
    • with-heart