Docs

Atoms

Avatar

Image element with fallback initials, status badge, and custom sizing.

6 examplesPrimitive ComponentReact 19 & Next.js 16Tailwind CSS v4
Install
pnpm add @quinkit/ui
Import
import { Avatar } from "@quinkit/ui";

Interactive Examples

Live previews · code · themes · viewport · dark mode

Image Avatar

Standard user avatar rendering remote profile images.

Image Avatar rendered preview

ERMCSP

Initials Fallback

Show initials or custom fallback when image fails to load.

Initials Fallback rendered preview

ALQKGH

Avatar Sizes

Available size variants (sm, default, lg).

Avatar Sizes rendered preview

SMsm (28px)
MDmd (36px)
LGlg (48px)

Status Indicators

Avatars with online, away, or do-not-disturb status badges.

Status Indicators rendered preview

OL
AW
DN

Avatar Group

Stacked avatar collection representing team members.

Avatar Group rendered preview

ALGHKJAT+5

Profile Card Integration

Avatar used inside a realistic user profile component.

Profile Card Integration rendered preview

JD

Jane Doe

Admin

jane.doe@quinkit.ui

Overview

Avatar is a Week 3 atom in @quinkit/ui. It is implemented with strict TypeScript, design-token classes, dark-mode compatible colors, Storybook coverage, and unit tests.

Accessibility Details

  • Use visible labels or aria-label for icon-only/unlabelled controls.
  • Keyboard behavior is verified in tests where the atom is interactive.
  • Focus styles use focus-visible and the shared ring token.

Dark mode and motion

The component uses semantic tokens such as bg-background, text-foreground, border-input, bg-primary, and text-primary-foreground, so it adapts to .dark and theme palettes. Motion-sensitive styling uses motion-reduce:* or avoids required animation.

Public API

Public props are documented with JSDoc in packages/ui/src/components/atoms/avatar/avatar.tsx.

Accessibility & Keyboard

Avatar adheres to WAI-ARIA design patterns for accessible web components.

Keyboard Navigation

  • Tab / Shift + Tab — Focuses control and moves between interactive elements.
  • Space / Enter — Triggers action or toggles selection.
  • Escape — Closes open popovers, overlays, or dropdown menus.

ARIA Standards

  • Built with semantic HTML tags and explicit aria-* attributes.
  • Uses high-contrast focus rings (ring-ring) visible in both light & dark mode.
  • Supports screen readers with non-visual label fallbacks.

Registry Install

Add a shadcn-compatible bridge file to your project that re-exports from @quinkit/ui.

Registry
npx shadcn@latest add https://quinkit-ui.vercel.app/r/avatar.json