Components
Avatar
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
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