popcn/ui logopopcn/ui
DocsComponentsBlocks

Getting Started

  • Introduction
  • Installation
  • Theming
  • Colors
  • Motion
  • CLI

Components

  • Accordion
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Code Block
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy Button
  • Data Table
  • Date Picker
  • Drawer
  • Dialog
  • Dropdown
  • Empty
  • Field
  • Form
  • Hover Card
  • Input
  • Input Group
  • Input OTP
  • Item
  • File Upload
  • Kbd
  • Label
  • Loading Button
  • Menubar
  • Multi Select
  • Native Select
  • Navigation Menu
  • Notification Badge
  • Pagination
  • Popover
  • Progress
  • Radio Group
  • Rating
  • Resizable
  • Scroll Area
  • Select
  • Separator
  • Split Button
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Spinner
  • Stepper
  • Switch
  • Table
  • Tag
  • Tabs
  • Textarea
  • Tree View
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Tooltip
  • Typography

Avatar

User avatar with image and fallback support.

Installation

npx popcn add avatar

Basic Usage

With Image

AP

Fallback Only

JD

With Accent Ring

Accent Ring

AP

Sizes

Different Sizes

SMMDLG

Props

PropTypeDefaultDescription
classNamestringundefinedUse utility classes (e.g. ring) to customize appearance