Avatar

Image with automatic fallback.

NKAR

Installation

npx @noarka/cli add avatar

tsx

import { Avatar, AvatarFallback, AvatarImage } from "@noarka/ui";

tsx

<Avatar>  <AvatarImage src="https://github.com/shadcn.png" alt="Ada Lovelace" />  <AvatarFallback>AL</AvatarFallback></Avatar>

Sizes

Control the size with height and width utilities. Default is h-10 w-10.

NKNKNK

Square shape

Override the default full rounding with any radius. Apply it to both Avatar and AvatarFallback.

NKAR

Stacked group

Overlap avatars with negative spacing, matching the ring to the card behind them.

NKARJM

Avatar

Prop	Type	Default
`render` Polymorphic render prop. Use to render a custom element instead of the default span.	`ReactElement \| ((props) => ReactNode)`	`-`
`className` Additional classes merged with the default avatar styles. Use h-/w- to resize.	`string`	`-`

AvatarImage

Prop	Type	Default
`src` Image URL rendered in a native img element.	`string`	`-`
`alt` Accessible text for the image.	`string`	`-`
`onLoadingStatusChange` Called when the image loading status changes.	`(status: 'idle' \| 'loading' \| 'loaded' \| 'error') => void`	`-`
`render` Polymorphic render prop. Use to render a custom element instead of the default img.	`ReactElement \| ((props) => ReactNode)`	`-`
`className` Additional classes merged with the default image styles.	`string`	`-`

AvatarFallback

Prop	Type	Default
`delay` Milliseconds to wait before showing the fallback.	`number`	`-`
`render` Polymorphic render prop. Use to render a custom element instead of the default span.	`ReactElement \| ((props) => ReactNode)`	`-`
`className` Additional classes merged with the default fallback styles.	`string`	`-`