ComponentsBlocksDocsExamples

Accordion
Field
Accordion Menu
Alert Dialog
Avatar
Badge
Breadcrumb
Button
Carousel
Checkbox
Collapsible
Command
Combobox
Context Menu
Date Picker
Dialog
Dropdown Menu
Form
Filters
New
Hover Card
Input
Update
Label
Menubar
Navigation Menu
Popover
Progress
Radio Group
Scroll Area
Select
Separator
Sheet
Slider
Sortable
Switch
Table
Tabs
Tooltip
Toggle
Toggle Group
Tree

Components

Avatar (unified)

UI Library:

An image element with a fallback for representing the user.

Open in
Loading

Installation

pnpm dlx shadcn@latest add @toui/avatar

Examples

Fallback

Open in
Loading

Indicator

Open in
Loading

Status

Open in
Loading

Badge

Open in
Loading

Size

Open in
Loading

Shapes

Group

Open in
Loading

Users

Open in
Loading

API Reference

This component builds on the Radix UI Avatar primitives, adding customization options such as indicators and status.

Avatar

This component is based on the Avatar.Root primitive.

PropTypeDefault
className string

AvatarImage

This component is based on the Avatar.Image primitive.

PropTypeDefault
className string

AvatarFallback

This component is based on the Avatar.Fallback primitive.

PropTypeDefault
className string

AvatarIndicator

This is a custom component used to display an indicator within the avatar.

PropTypeDefault
className string

AvatarStatus

This is a custom component for displaying a status indicator on the avatar.

PropTypeDefault
variant enum online
className string

Credits

  • Built with Radix UI Avatar.
PreviouseAlert DialogNextBadge

On This Page

  • Installation
  • Examples
    • Fallback
    • Indicator
    • Status
    • Badge
    • Size
    • Shapes
    • Group
    • Users
  • API Reference
    • Avatar
    • AvatarImage
    • AvatarFallback
    • AvatarIndicator
    • AvatarStatus
  • Credits

We use cookies

We use cookies to ensure you get the best experience on our website. For more information on how we use cookies, please see our cookie policy.

By clicking Accept, you agree to our use of cookies.
Learn more.

Token UI

Components

  • Overview
  • Pricing
  • Marketplace
  • Features
  • Integrations
  • Pricing

Blocks

  • Charts
  • Team
  • Blog
  • Careers
  • Contact
  • Privacy

Examples

  • Help
  • Sales
  • Advertise

Docs

  • Twitter
  • Instagram
  • LinkedIn

© 2025 TOUI.dev. All rights reserved.

  • Terms and Conditions
  • Privacy Policy