BlockDex

Components

Registries

Free blocks

Method

BlockDex

Components

Registries

Free blocks

Method

Open API

BlockDex

Components

Registries

Free blocks

Method

Open API

Components/Supabase Library/current-user-avatar-react

Current User Avatar

supabase-library/current-user-avatar-react
FreeComponent

Component which renders the current user's avatar.

Install it

npx shadcn@latest add https://raw.githubusercontent.com/supabase/supabase/master/apps/ui-library/public/r/current-user-avatar-react.json

Source

registry/default/blocks/current-user-avatar/components/current-user-avatar.tsxraw.githubusercontent.com/supabase/supabase/master/apps/ui-library/public/r/current-user-avatar-react.json
1'use client'
2
3import { useCurrentUserImage } from '@/registry/default/blocks/current-user-avatar/hooks/use-current-user-image'
4import { useCurrentUserName } from '@/registry/default/blocks/current-user-avatar/hooks/use-current-user-name'
5import { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/components/ui/avatar'
6
7export const CurrentUserAvatar = () => {
8 const profileImage = useCurrentUserImage()
9 const name = useCurrentUserName()
10 const initials = name
11 ?.split(' ')
12 ?.map((word) => word[0])
13 ?.join('')
14 ?.toUpperCase()
15
16 return (
17 <Avatar>
18 {profileImage && <AvatarImage src={profileImage} alt={initials} />}
19 <AvatarFallback>{initials}</AvatarFallback>
20 </Avatar>
21 )
22}

What it pulls in

npm packages

  • @supabase/supabase-js@latest

Other registry items

  • avatar

Files it writes

  • registry/default/blocks/current-user-avatar/components/current-user-avatar.tsx
  • registry/default/blocks/current-user-avatar/hooks/use-current-user-name.ts
  • registry/default/blocks/current-user-avatar/hooks/use-current-user-image.ts
  • registry/default/clients/react/lib/supabase/client.ts

Facts

Registry
Supabase Library
Type
registry:component
Access
Free
Files written
4
Licence
Apache-2.0
First indexed
2026-08-11
Last confirmed
today

Go to the source

supabase.com supabase/supabase on GitHub Raw registry item This item as JSON

More from Supabase Library

All 60 items
Same registry, same kind — the ones you would have found next
ComponentRegistryKindAccessInstallsCommand
Current User Avatarcurrent-user-avatar-nextjsSupabase LibraryComponentsFree2 deps · 6 files
Current User Avatarcurrent-user-avatar-react-routerSupabase LibraryComponentsFree2 deps · 5 files
Current User Avatarcurrent-user-avatar-tanstackSupabase LibraryComponentsFree2 deps · 5 files
Dropzone (File Upload)dropzone-nextjsSupabase LibraryComponentsFree4 deps · 5 files
Dropzone (File Upload)dropzone-reactSupabase LibraryComponentsFree3 deps · 3 files
Dropzone (File Upload)dropzone-react-routerSupabase LibraryComponentsFree4 deps · 4 files
Dropzone (File Upload)dropzone-tanstackSupabase LibraryComponentsFree4 deps · 4 files
Infinite Query for Vue and Supabaseinfinite-query-composableSupabase LibraryComponentsFree2 deps
BlockDex

Built by

Kynth Studios

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

BlockDex

BlockDex

Built by

Kynth Studios

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

BlockDex

BlockDex

Built by

Kynth Studios

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

BlockDex