XiodUI
HomeDocs
OverviewComponentsStyling & CustomizationChangelog

Components

  • Accordion
  • Agent Steps
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Autocomplete
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Button Split
  • Calendar
  • Card
  • Carousel
  • Checkbox
  • Circular Progress
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy To Clipboard
  • Corner Badge
  • Dashboard Grid
  • Date Picker
  • Dialog
  • Dot Matrix
  • Draggable
    Updated
  • Drawer
  • Empty
  • Field
  • Fieldset
  • File Upload
    Updated
  • Form
  • Frame
  • Gauge
  • Grid
  • Group
  • Input
  • Input Group
  • Input OTP
  • Input Payment
  • Input Phone
    Updated
  • Input Sensitive
  • Kbd
  • Kinetic Click
  • Label
  • List Box
    Updated
  • Loader
  • Marker
  • Menu
  • Menubar
  • Message
  • Meter
  • Morphic Toast
  • Navigation Menu
  • Number Field
  • Option Picker
  • Orb
  • Pagination
  • Popover
  • Preview Card
    Updated
  • Progress
  • Radio
  • Resizable
  • Ruler Picker
  • Scroll Area
  • Scroll Bar
  • Select
  • Separator
  • Sidebar
  • Skeleton
  • Slider
  • Sortable
  • Switch
  • Table
  • Tabs
  • Text
  • Textarea
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Toolbar
  • Tooltip
  • Waveform
  • Wheel Picker

Loading...

Preview Skeleton

Installation Skeleton

Usage Skeleton

API Reference Skeleton

Sponsors

Support the development of XiodUI and help us build the best component library on Earth.

+++
Sponsor on GitHub

Avatar

Previous: AutocompleteNext: Badge

A user's image, with initials or an icon when the image is missing or still loading.

Preview

Loading Preview...

Installation

bun add xiod-ui

Usage

Imports

1import {2  Avatar,3  AvatarFallback,4  AvatarGroup,5  AvatarImage6} from "xiod-ui/avatar";

Anatomy

1<Avatar>2  <AvatarImage />3  <AvatarFallback />4</Avatar>5<AvatarGroup>6  <Avatar>7    <AvatarImage />8    <AvatarFallback />9  </Avatar>10</AvatarGroup>

API Reference

Detailed documentation of properties and options.

Avatar

Accepts className, style and render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
shape
"circle"|"square"
circle

The avatar's shape: a circle or a square with rounded corners.

AutocompleteBadge
size
"lg"|"md"|"sm"|"2xl"|"xl"|"xs"
md

The size of the component.

AvatarFallback

Accepts className, style and render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
delay
number
0

How long to wait before showing the fallback. Specified in milliseconds.

AvatarGroup

Accepts render, plus every native <div> attribute.

AvatarImage

Accepts className, style and render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
keepMounted
boolean
false

Whether the image element stays mounted and loads in place instead of being preloaded. Supports loading="lazy" and optimized image components such as next/image.

onLoadingStatusChange
((status: ImageLoadingStatus) => void)
–

Callback fired when the loading status changes.