Next.js Avatar — Server-Rendered, Zero JS

Drivn installs through a small CLI that writes component source files directly into your repository — there is no runtime npm package and no version to keep upgrading. Open a terminal at the root of your Next.js 16 project and run npx drivn add avatar. The CLI prompts for an install directory, defaulting to src/components/ui/, then copies avatar.tsx into place. The Avatar pulls in no peer dependency at all — it is pure React and Tailwind, so there is nothing else to install and no icon library to add. The CLI reference documents every flag, including targeting a custom path or adding several components in one command. After install you own the file; future Drivn releases never overwrite it, and you can edit the internals without forking a package.

App Router pages are server components by default, so any client-side hook inside one fails at build time. Drivn's Avatar has no hooks to fail — it is a pure function with no 'use client' directive, no state, and no effect. Render it directly inside a server page and Next.js streams the markup as static HTML, shipping zero JavaScript for the avatar itself. Pass src for the image and fallback for the initials that show while no image is set or if the URL is missing. The installation guide covers project bootstrapping; the Avatar docs list every prop the component accepts.

Most user records have a name long before they have an uploaded photo, so the initials fallback is the common case, not the edge case. When src is omitted or empty, the Avatar renders a span containing fallback?.slice(0, 2).toUpperCase() — the first two characters of whatever string you pass, uppercased. Pass a two-letter code like "JD" directly, or pass a full name and let the slice trim it. The fallback sits on the component's gradient background, which runs from the primary to the secondary token, so initials read clearly without any extra styling. Because this logic lives in your repo after install, swapping the slice for a multi-word initial extractor is a small source edit. The Avatar examples show initials, groups, and status badges in context.

The Avatar ships with a plain <img> so it works in any React project without a framework dependency. In a Next.js app you usually want the optimizer instead, and because you own the source after install, switching is a small edit rather than a config flag. Open src/components/ui/avatar.tsx, import Image from next/image, and replace the <img> branch with an <Image fill /> — the container is already relative and overflow-hidden, so fill anchors to it correctly. Add a sizes value matching your largest preset (64px for xl) so Next.js serves an appropriately scaled file. The rest of the component, including the initials fallback, stays exactly as it was.

The size prop accepts four presets — sm, md, lg, xl — mapped to width, height, and text-size pairs in the component's styles.sizes object, defaulting to md. The base styles set rounded-full, overflow-hidden, and a bg-gradient-to-br from-primary to-secondary that shows through behind initials and during image load. Because the className prop merges last through cn, you can override the radius for a squircle, swap the gradient for a flat token color, or add a ring without touching the source. To restyle every avatar at once, edit styles.base directly in src/components/ui/avatar.tsx. The theming page maps the primary and secondary tokens the gradient reads from.