Avatar

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

Live Examples

Live Example

☀️

Copy

View Code

import { Avatar, AvatarFallback, AvatarImage } from '@jarllyng/nostromo' export default function AvatarExamples() { return ( <div className="space-x-4"> <Avatar> <AvatarImage src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='100%25' height='100%25' fill='%23e4e4e7'/%3E%3Ctext x='50%25' y='50%25' font-family='sans-serif' font-size='14' fill='%2371717a' text-anchor='middle' dy='.35em'%3EAB%3C/text%3E%3C/svg%3E" alt="User" /> <AvatarFallback>JD</AvatarFallback> </Avatar> ...

Import


import { Avatar, AvatarImage, AvatarFallback } from "@jarllyng/nostromo";
// or
import { Avatar, AvatarImage, AvatarFallback } from "@jarllyng/nostromo/avatar";

Usage


import { Avatar, AvatarImage, AvatarFallback } from "@jarllyng/nostromo";
 
export default function Example() {
  return (
    <Avatar>
      <AvatarImage src="/avatar.jpg" alt="User" />
      <AvatarFallback>JD</AvatarFallback>
    </Avatar>
  );
}

Sizes

Live Example

☀️

Copy

View Code

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

Props

Avatar

Prop	Type	Default	Required	Description
`size`	`"sm" \| "default" \| "lg"`	`"default"`	No	Size of the avatar
`variant`	`"default" \| "rounded" \| "square"`	`"default"`	No	Shape variant
`src`	`string`	`undefined`	No	Image source URL
`alt`	`string`	`undefined`	No	Alt text for the image
`fallback`	`string`	`undefined`	No	Fallback text when image fails to load
`className`	`string`	`undefined`	No	Additional CSS classes
`children`	`React.ReactNode`	`undefined`	No	Avatar content (AvatarImage, AvatarFallback)

AvatarImage

Prop	Type	Default	Required	Description
`src`	`string`	-	Yes	Image source URL
`alt`	`string`	`undefined`	No	Alt text for the image
`className`	`string`	`undefined`	No	Additional CSS classes

AvatarFallback

Prop	Type	Default	Required	Description
`className`	`string`	`undefined`	No	Additional CSS classes
`children`	`React.ReactNode`	`undefined`	No	Fallback content (usually initials)