Pikas UI

@pikas-ui/avatar

This package contains a avatar component that can be used to show a user's profile picture.

This library is based on Radix Ui.

Change Log

Requirements

To use this package, you must install the @pikas-ui/styles package.

Installation

You can install this package using npm, yarn, or pnpm.

npm install @pikas-ui/avatar

yarn add @pikas-ui/avatar

pnpm add @pikas-ui/avatar

Usage

Avatar

The avatar component is used to show a user's profile picture.

JDJD

import { Avatar } from '@pikas-ui/avatar';

const Example: React.FC = () => {
  return (
    <Avatar
      alt="Jane Doe"
      fallback="JD"
      src={
        'https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80'
      }
    />
  );
};

Props

Prop	Description	Type	Default
`alt`	The alt text for the image.	`string`	-
`src`	The image source.	`string`	-
`onLoadingStatusChange`	Callback when the image loading status changes.	`(status: AvatarImageLoadingStatus) => void`	-
`delayMs`	The delay in milliseconds before the image is loaded.	`number`	-
`fallback`	The fallback text.	`string`	-
`fallbackColorName`	The fallback text color.	`string`	`"primary"`
`fallbackBackgroundColorName`	The fallback background color.	`string`	`"primary-lightest-2"`
`css`	The css.	`AvatarCSS`	-
`size`	The size of the avatar.	`number`	`80`
`borderRadius`	The border radius of the avatar.	`PikasRadius`	`"full"`
`loading`	The loading status of the avatar.	`boolean`	`false`

Contributing

This documentation can be edited on GitHub here