Getting StartedInstall and bootstrap headless foundations 4
LayoutHeadless structural primitives for expandable and container patterns 6
OverlayHeadless modal and floating layer behavior 3
FeedbackHeadless notification and status communication patterns 5
FormHeadless input and selection contracts 17
UtilityReusable action, identity, and clipboard behavior 6
NavigationHeadless trails, trees, menus, and command surfaces 7
Overview API Styling Examples

Headless Avatar overview

tngAvatar, tngAvatarImage, and tngAvatarFallback are structural slot directives only. You own sizing, shape, fallback visibility, and load-error behavior.

Imports

Use the three directives together when you want full control over the avatar markup.

Headless imports

ts
import { TngAvatar, TngAvatarImage, TngAvatarFallback } from '@tailng-ui/primitives';

Basic usage

The primitive does not toggle fallback for you. In headless mode, your template decides when the image or fallback should be hidden.

Minimal headless avatar

html
<span tngAvatar class="profile-avatar">
  <img
    tngAvatarImage
    [attr.src]="src()"
    [attr.hidden]="showFallback() ? '' : null"
    [attr.alt]="showDecorative() ? '' : 'Taylor Nguyen'"
    (error)="imageLoadFailed.set(true)"
    (load)="imageLoadFailed.set(false)"
  />
  <span
    tngAvatarFallback
    [attr.hidden]="showFallback() ? null : ''"
    aria-hidden="true"
  >
    TN
  </span>
</span>

Style variants

The same primitive markup rendered with owner-authored Plain CSS and Tailwind shells.

Headless avatar (Plain CSS)

Taylor Nguyen

source mode: valid

Accessibility baseline

  • Use meaningful alt text when the avatar identifies a person.
  • Use alt="" and aria-hidden="true" fallback content for decorative avatars.
  • Keep fallback text short and readable because the primitive does not abbreviate it for you.