• Documentation
  • Components
  • Blocks
Getting Started
  • Introduction
  • Principles
  • Setup
  • AI Skills
  • Dark Mode
  • Migration Guide
Design System
  • Theming Tokens
  • Color Tokens
  • Buttons
  • UI Utilities & Variants
General & Navigation
  • Button
  • Link
  • Breadcrumbs
  • Toggle
  • Toggle Group
  • Search Field
  • File trigger
Form Inputs
  • Input
  • Number Field
  • Input OTP
  • Input Date
  • Input Time
  • Select
  • Checkbox
  • Radio
  • Combobox
  • Multi Select
  • Switch
  • Tag Field
  • Slider
  • Tabs
Date & Time
  • Calendar
  • Range Calendar
  • Date Picker
  • Date Range Picker
Data Feedback
  • Table
  • Alert
  • Avatar
  • Badge
  • Callout
  • Card
  • Progress Bar
  • Loader
  • Progress Bar Circle
  • Skeleton
  • Aspect Ratio
  • Keyboard
  • Separator
  • Native Table
  • Tag Group
Drag & Drop
  • Drag And Drop
Overlays & Disclosure
  • Dialog
  • Modal
  • Sheet
  • Popover
  • Disclosure
  • Disclosure Group
  • Menu
Layout & Structure
  • Sidebar
  • Navbar
Visualizations
  • Chart
  • Area Chart
  • Bar Chart
  • Line Chart
  • Pie Chart
  • Tracker
Typography
  • Heading
  • Icon
  • Text
  1. Components
  2. Avatar

Avatar

Display a user image, initials, or fallback icon with sizing options.

Demo

Preview
Code
User avatarJDABCD

Installation

terminal

Sizes

Preview
Code
User avatarxs
User avatarsm
User avatardefault
User avatarmd
User avatarlg
User avatarxl

Placeholder Variants

Preview
Code
JDABCDEFGH
JDABCDEFGH
JDABCDEFGH

Radius

Preview
Code
User avatarnone
User avatardefault
User avatarcircle
JDnone
ABdefault
CDcircle
Edit this page
Prev
Badge

Small label for counts or status indicators.

Next
On this page
  1. Demo
  2. Installation
  3. Sizes
  4. Placeholder Variants
  5. Radius

Community

  1. Contributing
  2. Edit this page
  3. Star On github
Published under MIT License
    DemoBlocksTemplatesClub
Copyright © jk-ui 2026. Designed By Johnkat MJ.