var Component=(()=>{var f=Object.create;var o=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var B=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),D=(n,l)=>{for(var a in l)o(n,a,{get:l[a],enumerable:!0})},h=(n,l,a,c)=>{if(l&&typeof l=="object"||typeof l=="function")for(let r of A(l))!b.call(n,r)&&r!==a&&o(n,r,{get:()=>l[r],enumerable:!(c=v(l,r))||c.enumerable});return n};var R=(n,l,a)=>(a=n!=null?f(C(n)):{},h(l||!n||!n.__esModule?o(a,"default",{value:n,enumerable:!0}):a,n)),k=n=>h(o({},"__esModule",{value:!0}),n);var m=B((N,y)=>{y.exports=_jsx_runtime});var x={};D(x,{default:()=>g});var e=R(m());function u(n){let l={a:"a",code:"code",figure:"figure",h2:"h2",pre:"pre",span:"span",...n.components},{ComponentPreview:a,ComponentSource:c,Step:r,Steps:i,Tabs:d,TabsContent:F,TabsList:p,TabsTrigger:t}=l;return a||s("ComponentPreview",!0),c||s("ComponentSource",!0),r||s("Step",!0),i||s("Steps",!0),d||s("Tabs",!0),F||s("TabsContent",!0),p||s("TabsList",!0),t||s("TabsTrigger",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(a,{name:"avatar-demo",description:"An avatar with a fallback.",children:[(0,e.jsx)(l.figure,{__src__:"registry/default/example/avatar-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { Avatar, AvatarFallback, AvatarImage } "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@/components/ui/avatar"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:" AvatarDemo"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"Avatar"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"AvatarImage"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" src"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"https://github.com/uplusion23.png"'}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" alt"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"@uplusion23"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"AvatarFallback"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">UP"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"}"})})]})})}),(0,e.jsx)(l.figure,{__src__:"registry/austin/example/avatar-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { Avatar, AvatarFallback, AvatarImage } "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@/components/ui/avatar"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:" AvatarDemo"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"Avatar"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"AvatarImage"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" src"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"https://github.com/uplusion23.png"'}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" alt"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"@uplusion23"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"AvatarFallback"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">UP"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"}"})})]})})}),(0,e.jsx)(l.figure,{__src__:"registry/dc/example/avatar-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { Avatar, AvatarFallback, AvatarImage } "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@/components/ui/avatar"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:" AvatarDemo"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"Avatar"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"AvatarImage"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" src"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"https://github.com/uplusion23.png"'}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" alt"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"@uplusion23"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"AvatarFallback"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">UP"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"}"})})]})})})]}),` `,(0,e.jsxs)(l.h2,{id:"installation",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,e.jsxs)(d,{defaultValue:"cli",children:[(0,e.jsxs)(p,{children:[(0,e.jsx)(t,{value:"cli",children:"CLI"}),(0,e.jsx)(t,{value:"manual",children:"Manual"})]}),(0,e.jsx)(F,{value:"cli",children:(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"bash","data-theme":"github-dark-high-contrast",children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"bunx"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" --bun"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:" @uplusion23/forge-ui"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:" add"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:" avatar"})]})})})})}),(0,e.jsx)(F,{value:"manual",children:(0,e.jsxs)(i,{children:[(0,e.jsx)(r,{children:"Install the following dependencies:"}),(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"bash","data-theme":"github-dark-high-contrast",children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"npm"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:" install"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:" @radix-ui/react-avatar"})]})})})}),(0,e.jsx)(r,{children:"Copy and paste the following code into your project."}),(0,e.jsxs)(c,{name:"avatar",children:[(0,e.jsx)(l.figure,{__src__:"registry/default/ui/avatar.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" AvatarPrimitive "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@radix-ui/react-avatar"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { cn } "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@/lib/utils"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" Avatar"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"AvatarPrimitive.Root"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", className)"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" />"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"));"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"Avatar.displayName "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" AvatarPrimitive.Root.displayName;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" AvatarImage"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"AvatarPrimitive.Image"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"aspect-square h-full w-full"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", className)"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" />"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"));"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"AvatarImage.displayName "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" AvatarPrimitive.Image.displayName;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" AvatarFallback"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"AvatarPrimitive.Fallback"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "flex h-full w-full items-center justify-center rounded-full bg-muted"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" className,"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" />"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"));"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"AvatarFallback.displayName "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" AvatarPrimitive.Fallback.displayName;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { Avatar, AvatarImage, AvatarFallback };"})]})]})})}),(0,e.jsx)(l.figure,{__src__:"registry/austin/ui/avatar.tsx",__style__:"austin","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" AvatarPrimitive "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@radix-ui/react-avatar"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { cn } "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@/lib/utils"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" Avatar"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"AvatarPrimitive.Root"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", className)"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" />"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"));"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"Avatar.displayName "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" AvatarPrimitive.Root.displayName;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" AvatarImage"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"AvatarPrimitive.Image"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"aspect-square h-full w-full"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", className)"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" />"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"));"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"AvatarImage.displayName "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" AvatarPrimitive.Image.displayName;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" AvatarFallback"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"AvatarPrimitive.Fallback"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "flex h-full w-full items-center justify-center rounded-full bg-muted"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" className,"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" />"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"));"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"AvatarFallback.displayName "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" AvatarPrimitive.Fallback.displayName;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { Avatar, AvatarImage, AvatarFallback };"})]})]})})}),(0,e.jsx)(l.figure,{__src__:"registry/dc/ui/avatar.tsx",__style__:"dc","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" AvatarPrimitive "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@radix-ui/react-avatar"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { cn } "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@/lib/utils"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" Avatar"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"AvatarPrimitive.Root"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"relative flex size-10 shrink-0 overflow-hidden rounded-full"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", className)"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" />"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"));"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"Avatar.displayName "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" AvatarPrimitive.Root.displayName;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" AvatarImage"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"AvatarPrimitive.Image"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"aspect-square size-full"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", className)"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" />"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"));"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"AvatarImage.displayName "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" AvatarPrimitive.Image.displayName;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" AvatarFallback"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"AvatarPrimitive.Fallback"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"flex size-full items-center justify-center rounded-full bg-muted"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", className)"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" />"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"));"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"AvatarFallback.displayName "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" AvatarPrimitive.Fallback.displayName;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { Avatar, AvatarImage, AvatarFallback };"})]})]})})})]}),(0,e.jsx)(r,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,e.jsxs)(l.h2,{id:"usage",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,e.jsx)(l.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { Avatar, AvatarFallback, AvatarImage } "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@/components/ui/avatar"'})]})})})}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"Avatar"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"AvatarImage"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" src"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"https://github.com/shadcn.png"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"AvatarFallback"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">CN"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:""})]})]})})})]})}function g(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,{...n,children:(0,e.jsx)(u,{...n})}):u(n)}function s(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return k(x);})(); ;return Component;