Skip to content
Velkin LogoVelkin Logo
Velkin
VELKIN/UI

Modern UI components for product teams and their AI agents. Lit core, typed wrappers, live MCP.

sales@velkinui.com

Product

  • Docs
  • Components
  • Studio
  • Pricing

Resources

  • Quick start
  • Blog
  • Changelog
  • Roadmap
  • Status

Project

  • About
  • Contact
  • License
  • Privacy
  • Terms

© 2026 Velkin. MIT core · Pro licenses available.

VELKIN

Avatar

An avatar component with image, initials, icon, or custom content.

vu-avatar · @velkin/react/avatar

Copy page

Import

React
npm i @velkin/react

import { VuAvatar } from "@velkin/react/avatar";

Examples

API

Props

PropTypeDefaultDescription
srcstring""Image URL.
namestring""Derives initials and default `alt`.
altstring""Image accessible name; defaults to `name`.
sizeVuAvatarSize"md"Overall dimension. Default: `"md"`.
radiusVuAvatarRadius"full"Corner radius. Default: `"full"`.
colorVuAvatarColor"default"Fallback surface intent. Default: `"default"`.
borderedbooleanfalseColored ring around the avatar. Default: `false`.
disabledbooleanfalseDims and disables pointer events. Default: `false`.

Slots

SlotDescription
—- Custom fallback when the image is absent or fails.

CSS parts

PartDescription
avatarOuter surface.
imageThe `<img>` element.
fallbackSlot, initials, or default icon wrapper.

Types

NameDefinition
VuAvatarColor
"default" | "primary" | "success" | "warning" | "danger"
VuAvatarRadius
"sm" | "md" | "lg" | "none" | "full"
VuAvatarSize
"sm" | "md" | "lg"

Related

Data display

  • Avatar GroupAn avatar group component that stacks overlapping avatars.
  • BadgeA badge component for counts, status dots, and overlay marks.
  • ChipA chip component for tags and filters with dismiss or toggle actions.
  • Data TableA data table component with sorting, filtering, and selection.
  • DividerA divider component for horizontal or vertical layout separation.
  • File ViewerA file viewer component for previewing uploaded or linked files.

Guides

  • AppearanceShared visual props
  • EventsSelection and change events

Browse

  • Previous: Text EditorEarlier in the sidebar
  • Next: Avatar GroupLater in the sidebar
  • All componentsBrowse the full index