Avatar

The Avatar component provides you with user avatars and profile pictures.

Live Examples

Storybook: components-avatar--default

Storybook: components-avatar--all-sizes

Storybook: components-avatar--with-image

Code Examples

import { Avatar, AvatarFallback, AvatarImage } from '@nostromo/ui-core'
 
export default function AvatarExamples() {
  return (
    <div className="space-x-4">
      <Avatar>
        <AvatarImage src="/avatar.jpg" alt="User" />
        <AvatarFallback>JD</AvatarFallback>
      </Avatar>
      
      <Avatar>
        <AvatarFallback>AB</AvatarFallback>
      </Avatar>
    </div>
  )
}

Sizes

import { Avatar, AvatarFallback, AvatarImage } from '@nostromo/ui-core'
 
export default function AvatarSizes() {
  return (
    <div className="space-x-4">
      <Avatar size="sm">
        <AvatarFallback>SM</AvatarFallback>
      </Avatar>
      <Avatar size="default">
        <AvatarFallback>MD</AvatarFallback>
      </Avatar>
      <Avatar size="lg">
        <AvatarFallback>LG</AvatarFallback>
      </Avatar>
    </div>
  )
}

Props

Prop	Type	Default	Description
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Avatar size

Table Accordion