var Component=(()=>{var v=Object.create;var o=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var b=(e,l)=>()=>(l||e((l={exports:{}}).exports,l),l.exports),C=(e,l)=>{for(var a in l)o(e,a,{get:l[a],enumerable:!0})},E=(e,l,a,c)=>{if(l&&typeof l=="object"||typeof l=="function")for(let r of g(l))!A.call(e,r)&&r!==a&&o(e,r,{get:()=>l[r],enumerable:!(c=f(l,r))||c.enumerable});return e};var _=(e,l,a)=>(a=e!=null?v(B(e)):{},E(l||!e||!e.__esModule?o(a,"default",{value:e,enumerable:!0}):a,e)),x=e=>E(o({},"__esModule",{value:!0}),e);var F=b((N,y)=>{y.exports=_jsx_runtime});var k={};C(k,{default:()=>u});var n=_(F());function m(e){let l={a:"a",code:"code",figure:"figure",h2:"h2",pre:"pre",span:"span",...e.components},{CodeTabs:a,ComponentPreview:c,ComponentSource:r,Step:t,Steps:p,TabsContent:i,TabsList:h,TabsTrigger:d}=l;return a||s("CodeTabs",!0),c||s("ComponentPreview",!0),r||s("ComponentSource",!0),t||s("Step",!0),p||s("Steps",!0),i||s("TabsContent",!0),h||s("TabsList",!0),d||s("TabsTrigger",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(c,{name:"avatar-demo",title:"Avatar",description:"An avatar with a fallback.",children:(0,n.jsx)(l.figure,{__src__:"registry/default/examples/avatar-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { Avatar, AvatarFallback, AvatarImage, } from "@/components/ui/avatar"; export function AvatarDemo() { return ( ); } `,__src__:"registry/default/examples/avatar-demo.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Avatar,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" AvatarFallback,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" AvatarImage,"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/avatar"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" AvatarDemo"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Avatar"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"AvatarImage"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" src"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"https://github.com/shadcn.png"'}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" alt"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"@shadcn"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"AvatarFallback"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" value"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"CN"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})}),` `,(0,n.jsxs)(l.h2,{id:"installation",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsxs)(a,{children:[(0,n.jsxs)(h,{children:[(0,n.jsx)(d,{value:"cli",children:"CLI"}),(0,n.jsx)(d,{value:"manual",children:"Manual"})]}),(0,n.jsx)(i,{value:"cli",children:(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{tabIndex:"0","data-language":"bash","data-theme":"github-dark",__rawString__:`npx shadcn@latest add "https://ui.fingertip.com/r/styles/default/avatar" `,__npmCommand__:`npx shadcn@latest add "https://ui.fingertip.com/r/styles/default/avatar" `,__yarnCommand__:`npx shadcn@latest add "https://ui.fingertip.com/r/styles/default/avatar" `,__pnpmCommand__:`pnpm dlx shadcn@latest add "https://ui.fingertip.com/r/styles/default/avatar" `,__bunCommand__:`bun x --bun shadcn@latest add "https://ui.fingertip.com/r/styles/default/avatar" `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"github-dark",style:{display:"grid"},children:(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"npx"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" shadcn@latest"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" add"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "https://ui.fingertip.com/r/styles/default/avatar"'})]})})})})}),(0,n.jsx)(i,{value:"manual",children:(0,n.jsxs)(p,{children:[(0,n.jsx)(t,{children:"Install the following dependencies:"}),(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{tabIndex:"0","data-language":"bash","data-theme":"github-dark",__rawString__:`npm install @radix-ui/react-avatar `,__npmCommand__:`npm install @radix-ui/react-avatar `,__yarnCommand__:`yarn add @radix-ui/react-avatar `,__pnpmCommand__:`pnpm add @radix-ui/react-avatar `,__bunCommand__:`bun add @radix-ui/react-avatar `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"github-dark",style:{display:"grid"},children:(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"npm"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" install"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" @radix-ui/react-avatar"})]})})})}),(0,n.jsx)(t,{children:"Copy and paste the following code into your project."}),(0,n.jsx)(r,{name:"avatar",children:(0,n.jsx)(l.figure,{__src__:"registry/default/ui/avatar.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`"use client"; import * as AvatarPrimitive from "@radix-ui/react-avatar"; import * as React from "react"; import { cn } from "@/lib/utils"; const Avatar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); Avatar.displayName = AvatarPrimitive.Root.displayName; const AvatarImage = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); AvatarImage.displayName = AvatarPrimitive.Image.displayName; const AvatarFallback = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { value: string; noColor?: boolean; } >(({ className, noColor, value, ...props }, ref) => { const colors = [ "#FA2C37", "#FF6900", "#FD9A00", "#EFB100", "#7CCE00", "#00C950", "#00BC7D", "#00BBA7", "#00B8DB", "#00A6F5", "#615FFF", "#8D51FF", "#AD47FF", "#E12BFB", "#F7339A", "#FF1F57", ]; const colorIndex = value ? value.charCodeAt(0) % colors.length : 0; return ( {value} ); }); AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName; export { Avatar, AvatarImage, AvatarFallback }; `,__src__:"registry/default/ui/avatar.tsx",__style__:"default",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"use client"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" *"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" as"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" AvatarPrimitive "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@radix-ui/react-avatar"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" *"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" as"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/lib/utils"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" Avatar"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React.forwardRef"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"<"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React.ElementRef"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:""}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React.ComponentPropsWithoutRef"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:""})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(({ "}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }, "}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"AvatarPrimitive.Root"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{ref}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "relative flex size-10 shrink-0 overflow-hidden rounded-full"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" className,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"props}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"));"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"Avatar.displayName "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" AvatarPrimitive.Root.displayName;"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" AvatarImage"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React.forwardRef"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"<"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React.ElementRef"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:""}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React.ComponentPropsWithoutRef"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:""})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(({ "}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }, "}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"AvatarPrimitive.Image"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{ref}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"aspect-square size-full object-cover"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", className)}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"props}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"));"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"AvatarImage.displayName "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" AvatarPrimitive.Image.displayName;"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" AvatarFallback"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React.forwardRef"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"<"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React.ElementRef"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:""}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React.ComponentPropsWithoutRef"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:""}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" &"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" value"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:": string;"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" noColor"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" boolean;"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(({ "}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"noColor"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }, "}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" colors"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "#FA2C37"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "#FF6900"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "#FD9A00"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "#EFB100"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "#7CCE00"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "#00C950"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "#00BC7D"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "#00BBA7"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "#00B8DB"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "#00A6F5"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "#615FFF"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "#8D51FF"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "#AD47FF"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "#E12BFB"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "#F7339A"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "#FF1F57"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ];"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" colorIndex"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"charCodeAt"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"%"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" colors."}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"length"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" :"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" 0"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"AvatarPrimitive.Fallback"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{ref}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "flex size-full items-center justify-center rounded-full text-sm font-semibold uppercase"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" className,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "bg-gray-50 dark:bg-muted text-muted-foreground border border-border"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:":"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" noColor,"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "text-white"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"noColor,"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"props}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" style"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{{ backgroundColor: "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"noColor "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" colors[colorIndex] "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" undefined"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {value}"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"});"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"AvatarFallback.displayName "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" AvatarPrimitive.Fallback.displayName;"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Avatar, AvatarImage, AvatarFallback };"})]})]})})})}),(0,n.jsx)(t,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,n.jsxs)(l.h2,{id:"usage",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; `,children:(0,n.jsx)(l.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Avatar, AvatarFallback, AvatarImage } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/avatar"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]})})})}),` `,(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:` CN `,children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Avatar"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"AvatarImage"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" src"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"https://github.com/shadcn.png"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"AvatarFallback"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">CN"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:""})]})]})})})]})}function u(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,{...e,children:(0,n.jsx)(m,{...e})}):m(e)}function s(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(k);})(); ;return Component;