Avatar

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

Import

import { Avatar, AvatarImage, AvatarFallback } from '@nostromo/ui-core'
// or
import { Avatar, AvatarImage, AvatarFallback } from '@nostromo/ui-core/avatar'

Usage

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

Live Examples

Live Example

☀️

Copy

Storybook →

View Code

import { Avatar, AvatarFallback, AvatarImage } from '@nostromo/ui-core' export default function AvatarExamples() { return ( <div className="space-x-4"> <Avatar> <AvatarImage src="https://via.placeholder.com/40?text=JD" alt="User" /> <AvatarFallback>JD</AvatarFallback> </Avatar> ...

Sizes

Live Example

☀️

Copy

Storybook →

View Code

import { Avatar, AvatarFallback } 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>...

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)

DataTable Accordion