Components

Avatar

DocsApi Reference
A

Installation

NPM packages are currently unstable and may cause issues. Use it at your own risk.

npm install @mijn-ui/react-avatar

Example Usage

avatar-example.tsx
import { Avatar, AvatarFallback, AvatarImage } from "@mijn-ui/react-avatar"
 
const AvatarExample = () => {
  return (
    <Avatar size="md">
      <AvatarImage
        src="https://plus.unsplash.com/premium_photo-1689977968861-9c91dbb16049?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cHJvZmlsZSUyMHBpY3R1cmV8ZW58MHx8MHx8fDA%3D"
        alt="anthony"
      />
      <AvatarFallback>A</AvatarFallback>
    </Avatar>
  )
}
 
export default AvatarExample

Avatar Sizes

xssmmdlgxlxxl
import { Avatar, AvatarFallback, AvatarImage } from "@mijn-ui/react-avatar"
 
const AvatarSizes = () => {
  return (
    <>
      <Avatar size="xs">
        <AvatarImage src="" alt="invalid-image" />
        <AvatarFallback>xs</AvatarFallback>
      </Avatar>
 
      <Avatar size="sm">
        <AvatarImage src="" alt="invalid-image" />
        <AvatarFallback>sm</AvatarFallback>
      </Avatar>
 
      <Avatar size="md">
        <AvatarImage src="" alt="invalid-image" />
        <AvatarFallback>md</AvatarFallback>
      </Avatar>
 
      <Avatar size="lg">
        <AvatarImage src="" alt="invalid-image" />
        <AvatarFallback>lg</AvatarFallback>
      </Avatar>
 
      <Avatar size="xl">
        <AvatarImage src="" alt="invalid-image" />
        <AvatarFallback>xl</AvatarFallback>
      </Avatar>
 
      <Avatar size="xxl">
        <AvatarImage src="" alt="invalid-image" />
        <AvatarFallback>xxl</AvatarFallback>
      </Avatar>
    </>
  )
}
 
export default AvatarSizes

Avatar Group

AnthonySusieJohn Doe+3
import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarImage,
} from "@mijn-ui/react-avatar"
 
const AvatarGroupExample = () => {
  return (
    <AvatarGroup className="flex items-center justify-center" max={3}>
      <Avatar size="sm">
        <AvatarImage src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YXZhdGFyfGVufDB8fDB8fHww" />
        <AvatarFallback>Anthony</AvatarFallback>
      </Avatar>
 
      <Avatar size="sm">
        <AvatarImage src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8YXZhdGFyfGVufDB8fDB8fHww" />
        <AvatarFallback>Susie</AvatarFallback>
      </Avatar>
 
      <Avatar size="sm">
        <AvatarImage src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D" />
        <AvatarFallback>John Doe</AvatarFallback>
      </Avatar>
 
      <Avatar size="sm">
        <AvatarImage src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D" />
        <AvatarFallback>John Doe</AvatarFallback>
      </Avatar>
 
      <Avatar size="sm">
        <AvatarImage src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D" />
        <AvatarFallback>John Doe</AvatarFallback>
      </Avatar>
 
      <Avatar size="sm">
        <AvatarImage src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D" />
        <AvatarFallback>John Doe</AvatarFallback>
      </Avatar>
    </AvatarGroup>
  )
}
 
export default AvatarGroupExample
Edit on GitHub

Previous

Autocomplete

Next

Badge

On this page