new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

shadcn/ui · Components · all subjects

avatar/usage

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Avatar basic usage example

A basic Avatar component with image and fallback: ```tsx <Avatar> <AvatarImage src="https://github.com/shadcn.png" /> <AvatarFallback>CN</AvatarFallback> </Avatar> ```

AvatarBadge position and styling

The AvatarBadge component is positioned at the bottom right of the avatar. The className prop can be used to add custom styles such as custom colors and sizes.

AvatarBadge with custom styling example

Example of customizing AvatarBadge colors: ```tsx <Avatar> <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" /> <AvatarFallback>CN</AvatarFallback> <AvatarBadge className="bg-green-600 dark:bg-green-800" /> </Avatar> ```

AvatarGroup for multiple avatars

The AvatarGroup component is used to display a group of avatars with overlapping styling.

AvatarGroupCount for counting additional avatars

The AvatarGroupCount component displays a count indicator in an avatar group, typically showing the number of additional avatars not displayed in the main group.

AvatarGroupCount icon support

An icon can be placed inside the AvatarGroupCount component as a child element.

Basic avatar usage example

A basic avatar component can be created with: ```tsx <Avatar> <AvatarImage src="https://github.com/shadcn.png" /> <AvatarFallback>CN</AvatarFallback> </Avatar> ``` This example shows how to combine an avatar image with a fallback display text.

Avatar basic usage import

Import Avatar components using: import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

Avatar basic usage example

A basic avatar component with image and fallback: ```tsx <Avatar> <AvatarImage src="https://github.com/shadcn.png" /> <AvatarFallback>CN</AvatarFallback> </Avatar> ``` This example shows how to render an Avatar with a source image and fallback text displayed when the image fails to load.

Avatar as dropdown trigger

The Avatar component can be used as a trigger for a dropdown menu.

Give your agent this brain