Components
Avatar
A hand-drawn circle border around a profile image or initials fallback.
SC
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/avatar.jsonProps
PropTypeDefaultDescription
animateOnHoverbooleantrueRedraws the sketch lines on hover.
classNamestring—
Additional Tailwind classes applied to the component.
fallbackstring—
Fallback initials or text shown when no image is available.
idstring—
Optional stable id used for sketch seeding and accessibility.
sizenumber40Controls the visual size of the component.
srcstring—
Image source URL.
themeCrumbleTheme—
Overrides the global Crumble theme for this instance.
With image
Sizes
SM
MD
LG
XL
Stacked group
AvatarGroup takes an avatars array of props objects and a max count. Extra avatars show as a +N overflow badge.
AB
CD
EF
+2
Accessibility
Avatar content remains text-accessible because the fallback initials live in the DOM. If the avatar is interactive, wrap it in a semantic button or link instead of attaching click behavior to a generic div.
Examples
import { Avatar } from "@/components/crumble/ui/avatar";
<Avatar fallback="SC" />;