Shadow Panda
Shadow Panda
Component
Avatar

Avatar

An image element with a fallback for representing the user.

shadcn/uiRadix UIAPI Reference
NP

Installation

Install the following dependencies

npm i @radix-ui/react-avatar

Copy and paste the following code into your project

components/ui/avatar/index.tsx
'use client'
 
import * as AvatarPrimitive from '@radix-ui/react-avatar'
import { createStyleContext } from '@shadow-panda/style-context'
import { styled } from '@shadow-panda/styled-system/jsx'
import { avatar } from '@shadow-panda/styled-system/recipes'
 
const { withProvider, withContext } = createStyleContext(avatar)
 
export const Avatar = withProvider(styled(AvatarPrimitive.Root), 'root')
export const AvatarImage = withContext(styled(AvatarPrimitive.Image), 'image')
export const AvatarFallback = withContext(styled(AvatarPrimitive.Fallback), 'fallback')

Update the import paths to match your project setup

Usage

import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
<Avatar>
  <AvatarImage src="https://github.com/nanopx.png" alt="@nanopx" />
  <AvatarFallback>NP</AvatarFallback>
</Avatar>
Aspect RatioBadge