Drivn vs shadcn/ui — Avatar Component Compared

shadcn/ui's Avatar is three components composed inside each other: an Avatar root, an AvatarImage for the photo, and an AvatarFallback for the initials or placeholder. You write all three every time you render an avatar — for a comment thread with fifty rows, that is 150 component calls plus any icon or text inside AvatarFallback. Drivn's Avatar is a single component: you pass src, alt, fallback, and size. One call, four props, done.

The tradeoff is composability versus ergonomics. shadcn's slot model lets you put any JSX inside the fallback without prop surgery; Drivn's prop model keeps the call site clean at the cost of a one-line edit to the component file when you want a custom fallback other than initials. For most applications — comment threads, user tables, account headers — the initials fallback is all you need, so the prop API saves repetitive markup throughout the codebase.

The most meaningful difference between the two libraries is what happens when the image fails to load. shadcn/ui's Radix primitive listens to the browser's onError event on the underlying <img> element. When the image returns a 404, the network is unavailable, or the URL is malformed, Radix transitions from the image slot to the fallback slot automatically, without any prop change. You always see either the image or the fallback, never a broken image icon.

Drivn's Avatar uses a conditional render keyed on whether src is truthy. If src is an empty string, undefined, or null, the fallback renders immediately. If src has a value — even a URL that returns 404 — the <img> element renders and the browser handles the error normally. In practice a broken image icon appears if the URL resolves to nothing. The fix is to validate image URLs before passing them as src, or add a one-line onError handler inside avatar.tsx after install. Because the source lives in your repo, you own that change permanently without waiting for a library release.

shadcn/ui's Avatar has no built-in sizes. The root container defaults to h-10 w-10 (40 px), and any other size requires overriding the className at the call site. Drivn ships four named sizes — sm (32 px), md (40 px, default), lg (48 px), and xl (64 px) — as entries in the const styles.sizes object. Passing size="lg" to a comment author avatar and size="sm" to a data table cell requires no className at the call site.

Adding a custom size to Drivn is one line in avatar.tsx: add a key to styles.sizes with a width and height Tailwind class, and the keyof typeof styles.sizes type picks it up immediately. The theming guide describes how to add a CSS custom property if your brand needs a size that the four defaults do not cover. For teams building tables, lists, and headers that render the same Avatar at different scales, the built-in size variants eliminate a className-per-callsite pattern that accumulates quickly.

shadcn/ui's AvatarFallback renders any children you pass — a two-letter string, an icon component, or a full SVG. You control the content entirely, but you also write it at every call site. Drivn's fallback is prop-driven: pass a string as fallback, and the component renders fallback.slice(0, 2).toUpperCase() automatically. Passing "Jane Doe" renders "JA"; passing "JD" renders "JD". The gradient background behind the initials uses the --color-primary and --color-secondary design tokens, so the fallback looks on-brand without a className.

If you need a non-initials fallback — an icon, an anonymous silhouette, a question mark — the path with Drivn is a one-line edit to avatar.tsx to replace the <span> with conditional JSX. With shadcn you pass the icon as children with no edit needed. This is the one area where shadcn's slot model wins on composability. For teams whose fallback is always initials, the prop API is faster at every call site. For teams with mixed fallback content, shadcn's children model is more flexible.

Both libraries put the Avatar source directly in your repo, so both invite the same category of customizations. The shape of the customization differs. shadcn adds sizing and shape overrides via className at the call site. Drivn's const styles object is a plain record of Tailwind strings — styles.sizes.sm, styles.sizes.md, styles.base — all indexed by keyof typeof types. Adding a new size or changing the base border radius is a literal string edit.

For design token integration, Drivn's Avatar uses from-primary and to-secondary gradient classes. Both map to CSS custom properties in globals.scss, so rebranding the fallback background is a token edit that propagates to every Avatar instance automatically. The theming docs cover which tokens are involved. For adding a ring, a border, or a status dot overlay, the Avatar's outer div has relative and overflow-hidden applied — stack a positioned <span> as a sibling wrapped in a relative container. The avatar examples page shows a working status dot pattern.