Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 17
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7
Overview API Styling Examples

Avatar overview

<tng-avatar> wraps the headless avatar slots with built-in fallback handling, default sizing, and a minimum visual shell.

Imports

Use the wrapper when you want the library’s default avatar shell instead of managing fallback logic yourself.

Wrapper import

ts
import { TngAvatarComponent } from '@tailng-ui/components';

Minimal wrapper usage

html
<tng-avatar
  [src]="profilePhotoUrl"
  fallback="Tail Ng"
  alt="Taylor Nguyen"
  shape="circle"
  size="md"
></tng-avatar>

Style variants

The wrapper keeps fallback behavior and slot wiring while you own surrounding composition.

Wrapper avatar (Plain CSS)

Taylor NguyenTaylor Nguyen NI

source mode: valid

Accessibility baseline

  • Use meaningful alt text when the avatar identifies a person.
  • Use alt="" for decorative avatars when nearby text already names the person.
  • The wrapper automatically switches to fallback text when src is empty or the image fails to load.