Basic

flx/avatar-01

FreeBlock

Image avatar with an initials fallback.

Install it

npx shadcn@latest add https://ui.flexnative.com/r/avatar-01.json

Source

registry/patterns/avatar/avatar-01.tsxui.flexnative.com/r/avatar-01.json

1import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
2 
3export function Avatar01() {
4  return (
5    <Avatar>
6      <AvatarImage
7        src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=200&auto=format&fit=crop"
8        alt="Sofia Rodrigues"
9      />
10      <AvatarFallback>SR</AvatarFallback>
11    </Avatar>
12  )
13}

What it pulls in

Other registry items

avatar

Files it writes

registry/patterns/avatar/avatar-01.tsx

More from flx

All 450 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Basicaccordion-01	flx	Blocks	Free	no deps
Multipleaccordion-02	flx	Blocks	Free	no deps
With iconsaccordion-03	flx	Blocks	Free	no deps
FAQaccordion-04	flx	Blocks	Free	no deps
Separated cardsaccordion-05	flx	Blocks	Free	no deps
Plus / minus iconaccordion-06	flx	Blocks	Free	1 dep
Left chevronaccordion-07	flx	Blocks	Free	1 dep
Rich contentaccordion-09	flx	Blocks	Free	no deps