Tastival UI Design

Design system showcase

Data

Tables, charts, and carousels.

avatar

User image from the Figma Make library with a fallback for loading or missing photos.

How to add it

Import the avatar parts from @tastival.net/ui and compose avatar, avatar-image, and avatar-fallback. Later common components can reuse these same elements.

Import 

import {
  AvatarComponent,
  AvatarImageComponent,
  AvatarFallbackComponent,
} from '@tastival.net/ui';

@Component({
  imports: [AvatarComponent, AvatarImageComponent, AvatarFallbackComponent],
})
export class ExampleComponent {}

Usage 

<avatar className="ring-2 ring-offset-2">
  <avatar-image src="/avatars/ada.svg" alt="Ada Lovelace" className="object-cover" />
  <avatar-fallback className="text-sm" [delayMs]="0">AL</avatar-fallback>
</avatar>
<avatar className="">
  <avatar-image src="" alt="" className="" />
  <avatar-fallback className="font-medium" [delayMs]="600">JD</avatar-fallback>
</avatar>

Examples

Playground

Preview

AL