Shim

Avatar

Display an image or icon representing a user or entity.

Source
GitHub
Issues
Report
Install
pnpm dlx @kkga/shim add avatar
KF
import { Avatar } from "@/shim-ui/avatar";

export default () => (
  <>
    <Avatar name="Kale Frost" />
    <Avatar
      name="Kale Frost"
      src="https://images.unsplash.com/photo-1533933269825-da140ad3132f?&w=256&h=256&q=80&crop=focalpoint&fp-x=0.5&fp-y=0.5&fp-z=1&fit=crop"
    />
  </>
);

Install

Use the CLI or copy the source code manually.

pnpm dlx @kkga/shim add avatar

Size

Use the size prop to set the size of the avatar.

import { Avatar } from "@/shim-ui/avatar";

const SRC =
  "https://images.unsplash.com/photo-1533933269825-da140ad3132f?&w=256&h=256&q=80&crop=focalpoint&fp-x=0.5&fp-y=0.5&fp-z=1&fit=crop";

export default () => (
  <>
    <Avatar name="Kale Frost" size={1} src={SRC} />
    <Avatar name="Kale Frost" size={2} src={SRC} />
    <Avatar name="Kale Frost" size={3} src={SRC} />
    <Avatar name="Kale Frost" size={4} src={SRC} />
    <Avatar name="Kale Frost" size={5} src={SRC} />
    <Avatar name="Kale Frost" size={6} src={SRC} />
    <Avatar name="Kale Frost" size={7} src={SRC} />
  </>
);

Radius

Use the radius prop to set the border radius of the avatar.

import { Avatar } from "@/shim-ui/avatar";

const SRC =
  "https://images.unsplash.com/photo-1533933269825-da140ad3132f?&w=256&h=256&q=80&crop=focalpoint&fp-x=0.5&fp-y=0.5&fp-z=1&fit=crop";

export default () => (
  <>
    <Avatar name="Kale Frost" radius="none" src={SRC} />
    <Avatar name="Kale Frost" radius="sm" src={SRC} />
    <Avatar name="Kale Frost" radius="md" src={SRC} />
    <Avatar name="Kale Frost" radius="lg" src={SRC} />
    <Avatar name="Kale Frost" radius="full" src={SRC} />
  </>
);

Color

Use the color prop to set the color of the avatar background and matching text color.

KF
KF
KF
KF
import { Avatar } from "@/shim-ui/avatar";

export default () => (
  <>
    <Avatar color="gray" name="Kale Frost" />
    <Avatar color="blue" name="Kale Frost" />
    <Avatar color="green" name="Kale Frost" />
    <Avatar color="orange" name="Kale Frost" />
  </>
);