6:["$","main",null,{"className":"relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]","children":[["$","div",null,{"className":"mx-auto w-full min-w-0","children":[["$","div",null,{"className":"mb-4 flex items-center space-x-1 text-sm text-muted-foreground","children":[["$","div",null,{"className":"truncate","children":"Docs"}],["$","svg",null,{"width":"15","height":"15","viewBox":"0 0 15 15","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"size-4","children":["$","path",null,{"d":"M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z","fill":"currentColor","fillRule":"evenodd","clipRule":"evenodd"}]}],["$","div",null,{"className":"font-medium text-foreground","children":"Avatar"}]]}],["$","div",null,{"className":"space-y-2","children":[["$","h1",null,{"className":"scroll-m-20 text-4xl font-bold tracking-tight","children":"Avatar"}],["$","p",null,{"className":"text-balance text-lg text-muted-foreground","children":"Displays a user's profile picture or initials with multiple variants and sizes."}]]}],null,["$","div",null,{"className":"pb-12 pt-8","children":["$","article",null,{"className":"mx-auto max-w-[120ch]","children":[["$","h2",null,{"className":"font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0","id":"installation","children":[["$","a",null,{"className":"font-medium underline underline-offset-4 subheading-anchor","aria-label":"Link to section","href":"#installation","children":["$","span",null,{"className":"icon icon-link"}]}],"Installation"]}],"\n",["$","div",null,{"role":"alert","className":"relative w-full rounded-lg border px-4 py-3 text-sm [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground bg-background text-foreground","children":["$undefined","$undefined",["$","div",null,{"className":"text-sm [&_p]:leading-relaxed","children":["$","p",null,{"className":"leading-7 [&:not(:first-child)]:mt-6","children":[["$","strong",null,{"children":"Note:"}]," We have the exact same installation process as ",["$","a",null,{"target":"_blank","rel":"noopener noreferrer","className":"font-medium underline underline-offset-4","href":"https://ui.shadcn.com/docs/installation/","children":"shadcn/ui"}],"."]}]}]]}],"\n",["$","$L18",null,{"className":"relative mt-6 w-full","defaultValue":"cli","children":[["$","$L19",null,{"className":"w-full justify-start rounded-none border-b bg-transparent p-0","children":[["$","$L1a",null,{"className":"relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none","value":"cli","children":"CLI"}],["$","$L1a",null,{"className":"relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none","value":"manual","children":"Manual"}]]}],["$","$L1b",null,{"className":"relative [&_h3.font-heading]:text-base [&_h3.font-heading]:font-semibold","value":"cli","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","children":[["$","pre",null,{"className":"mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900 Lambda Studio — Blackout","style":{"backgroundColor":"#000","color":"#fff"},"tabIndex":"0","data-language":"bash","data-theme":"Lambda Studio — Blackout","children":["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","data-language":"bash","data-theme":"Lambda Studio — Blackout","style":{"display":"grid"},"children":["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF","fontWeight":"bold"},"children":"npx"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" shadcn@latest"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" add"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"https://ui.shaduxe.com/r/avatar\""}]]}]}]}],"$undefined",["$","$L1c",null,{"commands":{"__npmCommand__":"npx shadcn@latest add \"https://ui.shaduxe.com/r/avatar\"\n","__pnpmCommand__":"pnpm dlx shadcn@latest add \"https://ui.shaduxe.com/r/avatar\"\n","__yarnCommand__":"npx shadcn@latest add \"https://ui.shaduxe.com/r/avatar\"\n","__bunCommand__":"bunx --bun shadcn@latest add \"https://ui.shaduxe.com/r/avatar\"\n"},"className":"absolute right-4 top-4"}]]}]}],["$","$L1b",null,{"className":"relative [&_h3.font-heading]:text-base [&_h3.font-heading]:font-semibold","value":"manual","children":["$","div",null,{"className":"[&>h3]:step steps mb-12 ml-4 border-l pl-8 [counter-reset:step]","children":[["$","h3",null,{"className":"font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight","title":"Copy the Code","children":["$","p",null,{"className":"leading-7 [&:not(:first-child)]:mt-6","children":"Copy and paste the following code snippet into your project:"}]}],["$","$L1d",null,{"name":"avatar","children":["$","figure",null,{"__src__":"registry/default/ui/avatar.tsx","data-rehype-pretty-code-figure":"","children":[["$","pre",null,{"className":"mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900 Lambda Studio — Blackout","style":{"backgroundColor":"#000","color":"#fff"},"tabIndex":"0","data-language":"tsx","data-theme":"Lambda Studio — Blackout","children":["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","data-language":"tsx","data-theme":"Lambda Studio — Blackout","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"\"use client\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"import"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" *"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" as"}],["$","span",null,{"style":{"color":"#FFF"},"children":" React "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"from"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"react\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"import"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" *"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" as"}],["$","span",null,{"style":{"color":"#FFF"},"children":" AvatarPrimitive "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"from"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"@radix-ui/react-avatar\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"import"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}],["$","span",null,{"style":{"color":"#FFF"},"children":" cva"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF8"},"children":" type"}],["$","span",null,{"style":{"color":"#FFF"},"children":" VariantProps "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" from"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"class-variance-authority\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"import"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}],["$","span",null,{"style":{"color":"#FFF"},"children":" cn "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" from"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"@/lib/utils\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"const"}],["$","span",null,{"style":{"color":"#FFF"},"children":" avatarVariants "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF"},"children":" cva"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"("}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"relative flex shrink-0 overflow-hidden\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" variants"}],["$","span",null,{"style":{"color":"#FFF8"},"children":":"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" variant"}],["$","span",null,{"style":{"color":"#FFF8"},"children":":"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" circle"}],["$","span",null,{"style":{"color":"#FFF8"},"children":":"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"rounded-full\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" square"}],["$","span",null,{"style":{"color":"#FFF8"},"children":":"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"rounded-none\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" rounded"}],["$","span",null,{"style":{"color":"#FFF8"},"children":":"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"rounded-md\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" size"}],["$","span",null,{"style":{"color":"#FFF8"},"children":":"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" xs"}],["$","span",null,{"style":{"color":"#FFF8"},"children":":"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"size-6\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" sm"}],["$","span",null,{"style":{"color":"#FFF8"},"children":":"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"size-8\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" md"}],["$","span",null,{"style":{"color":"#FFF8"},"children":":"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"size-10\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" lg"}],["$","span",null,{"style":{"color":"#FFF8"},"children":":"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"size-12\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" xl"}],["$","span",null,{"style":{"color":"#FFF8"},"children":":"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"size-16\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" \"2xl\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":":"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"size-20\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" defaultVariants"}],["$","span",null,{"style":{"color":"#FFF8"},"children":":"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" variant"}],["$","span",null,{"style":{"color":"#FFF8"},"children":":"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"circle\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" size"}],["$","span",null,{"style":{"color":"#FFF8"},"children":":"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"md\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":"});"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"const"}],["$","span",null,{"style":{"color":"#FFF"},"children":" avatarImageVariants "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF"},"children":" cva"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"("}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"aspect-square size-full\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" variants"}],["$","span",null,{"style":{"color":"#FFF8"},"children":":"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" variant"}],["$","span",null,{"style":{"color":"#FFF8"},"children":":"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" circle"}],["$","span",null,{"style":{"color":"#FFF8"},"children":":"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"rounded-full\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" square"}],["$","span",null,{"style":{"color":"#FFF8"},"children":":"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"rounded-none\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" rounded"}],["$","span",null,{"style":{"color":"#FFF8"},"children":":"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"rounded-md\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" defaultVariants"}],["$","span",null,{"style":{"color":"#FFF8"},"children":":"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" variant"}],["$","span",null,{"style":{"color":"#FFF8"},"children":":"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"circle\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":"});"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"export"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" interface"}],["$","span",null,{"style":{"color":"#FFF","fontWeight":"bold"},"children":" AvatarProps"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" extends"}],["$","span",null,{"style":{"color":"#FFF","fontWeight":"bold"},"children":" React"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"."}],["$","span",null,{"style":{"color":"#FFF","fontWeight":"bold"},"children":"HTMLAttributes"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"<"}],["$","span",null,{"style":{"color":"#FFF","fontWeight":"bold"},"children":"HTMLDivElement"}],["$","span",null,{"style":{"color":"#FFF8"},"children":">,"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF","fontWeight":"bold"},"children":" VariantProps"}],["$","span",null,{"style":{"color":"#FFF8"},"children":""}],["$","span",null,{"style":{"color":"#FFF8"},"children":" {}"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"const"}],["$","span",null,{"style":{"color":"#FFF"},"children":" Avatar "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF"},"children":" React"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"."}],["$","span",null,{"style":{"color":"#FFF"},"children":"forwardRef"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"<"}],["$","span",null,{"style":{"color":"#FFF","fontWeight":"bold"},"children":"HTMLDivElement"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF","fontWeight":"bold"},"children":" AvatarProps"}],["$","span",null,{"style":{"color":"#FFF8"},"children":">("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" ({"}],["$","span",null,{"style":{"color":"#FFF"},"children":" className"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF"},"children":" variant"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF"},"children":" size"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF8"},"children":" ..."}],["$","span",null,{"style":{"color":"#FFF"},"children":"props "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"},"}],["$","span",null,{"style":{"color":"#FFF"},"children":" ref"}],["$","span",null,{"style":{"color":"#FFF8"},"children":")"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" =>"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"AvatarPrimitive.Root"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" ref"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"={"}],["$","span",null,{"style":{"color":"#FFF"},"children":"ref"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" className"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"={"}],["$","span",null,{"style":{"color":"#FFF"},"children":"cn"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"("}],["$","span",null,{"style":{"color":"#FFF"},"children":"avatarVariants"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"({"}],["$","span",null,{"style":{"color":"#FFF"},"children":" variant"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF"},"children":" size "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}),"}],["$","span",null,{"style":{"color":"#FFF"},"children":" className"}],["$","span",null,{"style":{"color":"#FFF8"},"children":")}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" {..."}],["$","span",null,{"style":{"color":"#FFF"},"children":"props"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":" >"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}],["$","span",null,{"style":{"color":"#FFF"},"children":"React"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"."}],["$","span",null,{"style":{"color":"#FFF"},"children":"Children"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"."}],["$","span",null,{"style":{"color":"#FFF"},"children":"map"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"("}],["$","span",null,{"style":{"color":"#FFF"},"children":"props"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"."}],["$","span",null,{"style":{"color":"#FFF"},"children":"children"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF8"},"children":" ("}],["$","span",null,{"style":{"color":"#FFF"},"children":"child"}],["$","span",null,{"style":{"color":"#FFF8"},"children":")"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" =>"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" React"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"."}],["$","span",null,{"style":{"color":"#FFF"},"children":"isValidElement"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"("}],["$","span",null,{"style":{"color":"#FFF"},"children":"child"}],["$","span",null,{"style":{"color":"#FFF8"},"children":")"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" ?"}],["$","span",null,{"style":{"color":"#FFF"},"children":" React"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"."}],["$","span",null,{"style":{"color":"#FFF"},"children":"cloneElement"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"("}],["$","span",null,{"style":{"color":"#FFF"},"children":"child "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"as"}],["$","span",null,{"style":{"color":"#FFF","fontWeight":"bold"},"children":" React"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"."}],["$","span",null,{"style":{"color":"#FFF","fontWeight":"bold"},"children":"ReactElement"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"<"}],["$","span",null,{"style":{"color":"#FFF"},"children":"any"}],["$","span",null,{"style":{"color":"#FFF8"},"children":">,"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" variant"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" className"}],["$","span",null,{"style":{"color":"#FFF8"},"children":":"}],["$","span",null,{"style":{"color":"#FFF"},"children":" cn"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" ("}],["$","span",null,{"style":{"color":"#FFF"},"children":"child "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"as"}],["$","span",null,{"style":{"color":"#FFF","fontWeight":"bold"},"children":" React"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"."}],["$","span",null,{"style":{"color":"#FFF","fontWeight":"bold"},"children":"ReactElement"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"<"}],["$","span",null,{"style":{"color":"#FFF"},"children":"any"}],["$","span",null,{"style":{"color":"#FFF8"},"children":">)."}],["$","span",null,{"style":{"color":"#FFF"},"children":"props"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"."}],["$","span",null,{"style":{"color":"#FFF"},"children":"className"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" avatarImageVariants"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"({"}],["$","span",null,{"style":{"color":"#FFF"},"children":" variant "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}),"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":" ),"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":" })"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" :"}],["$","span",null,{"style":{"color":"#FFF"},"children":" child"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":" )}"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":" ),"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":");"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":"Avatar"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"."}],["$","span",null,{"style":{"color":"#FFF"},"children":"displayName "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF"},"children":" AvatarPrimitive"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"."}],["$","span",null,{"style":{"color":"#FFF"},"children":"Root"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"."}],["$","span",null,{"style":{"color":"#FFF"},"children":"displayName"}],["$","span",null,{"style":{"color":"#FFF8"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"export"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" interface"}],["$","span",null,{"style":{"color":"#FFF","fontWeight":"bold"},"children":" AvatarImageProps"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" extends"}],["$","span",null,{"style":{"color":"#FFF","fontWeight":"bold"},"children":" React"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"."}],["$","span",null,{"style":{"color":"#FFF","fontWeight":"bold"},"children":"ComponentPropsWithoutRef"}],["$","span",null,{"style":{"color":"#FFF8"},"children":""}],["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" variant"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"?:"}],["$","span",null,{"style":{"color":"#FFF","fontWeight":"bold"},"children":" VariantProps"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"["}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"variant\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":"];"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"const"}],["$","span",null,{"style":{"color":"#FFF"},"children":" AvatarImage "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF"},"children":" React"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"."}],["$","span",null,{"style":{"color":"#FFF"},"children":"forwardRef"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"<"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" React"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"."}],["$","span",null,{"style":{"color":"#FFF"},"children":"ElementRef"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF"},"children":" AvatarImageProps"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":">(({"}],["$","span",null,{"style":{"color":"#FFF"},"children":" className"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF"},"children":" variant"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF8"},"children":" ..."}],["$","span",null,{"style":{"color":"#FFF"},"children":"props "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"},"}],["$","span",null,{"style":{"color":"#FFF"},"children":" ref"}],["$","span",null,{"style":{"color":"#FFF8"},"children":")"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" =>"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"AvatarPrimitive.Image"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" ref"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"={"}],["$","span",null,{"style":{"color":"#FFF"},"children":"ref"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" className"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"={"}],["$","span",null,{"style":{"color":"#FFF"},"children":"cn"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"("}],["$","span",null,{"style":{"color":"#FFF"},"children":"avatarImageVariants"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"({"}],["$","span",null,{"style":{"color":"#FFF"},"children":" variant "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}),"}],["$","span",null,{"style":{"color":"#FFF"},"children":" className"}],["$","span",null,{"style":{"color":"#FFF8"},"children":")}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" {..."}],["$","span",null,{"style":{"color":"#FFF"},"children":"props"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":" />"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":"));"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":"AvatarImage"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"."}],["$","span",null,{"style":{"color":"#FFF"},"children":"displayName "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF"},"children":" AvatarPrimitive"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"."}],["$","span",null,{"style":{"color":"#FFF"},"children":"Image"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"."}],["$","span",null,{"style":{"color":"#FFF"},"children":"displayName"}],["$","span",null,{"style":{"color":"#FFF8"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"const"}],["$","span",null,{"style":{"color":"#FFF"},"children":" AvatarFallback "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF"},"children":" React"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"."}],["$","span",null,{"style":{"color":"#FFF"},"children":"forwardRef"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"<"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" React"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"."}],["$","span",null,{"style":{"color":"#FFF"},"children":"ElementRef"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" React"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"."}],["$","span",null,{"style":{"color":"#FFF"},"children":"ComponentPropsWithoutRef"}],["$","span",null,{"style":{"color":"#FFF8"},"children":""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":">(({"}],["$","span",null,{"style":{"color":"#FFF"},"children":" className"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF8"},"children":" ..."}],["$","span",null,{"style":{"color":"#FFF"},"children":"props "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"},"}],["$","span",null,{"style":{"color":"#FFF"},"children":" ref"}],["$","span",null,{"style":{"color":"#FFF8"},"children":")"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" =>"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"AvatarPrimitive.Fallback"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" ref"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"={"}],["$","span",null,{"style":{"color":"#FFF"},"children":"ref"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" className"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"={"}],["$","span",null,{"style":{"color":"#FFF"},"children":"cn"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" \"flex size-full items-center justify-center bg-muted\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" className"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":" )}"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" {..."}],["$","span",null,{"style":{"color":"#FFF"},"children":"props"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":" />"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":"));"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":"AvatarFallback"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"."}],["$","span",null,{"style":{"color":"#FFF"},"children":"displayName "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF"},"children":" AvatarPrimitive"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"."}],["$","span",null,{"style":{"color":"#FFF"},"children":"Fallback"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"."}],["$","span",null,{"style":{"color":"#FFF"},"children":"displayName"}],["$","span",null,{"style":{"color":"#FFF8"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"export"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}],["$","span",null,{"style":{"color":"#FFF"},"children":" Avatar"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF"},"children":" AvatarImage"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF"},"children":" AvatarFallback "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"};"}]]}]]}]}],["$","$L1e",null,{"value":"$1f","src":"registry/default/ui/avatar.tsx","event":"copy_source_code","className":"absolute right-4 top-4"}],"$undefined"]}]}],["$","h3",null,{"className":"font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight","children":"Make sure the import path is correct and matches your project setup:"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":[["$","pre",null,{"className":"mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900 Lambda Studio — Blackout","style":{"backgroundColor":"#000","color":"#fff"},"tabIndex":"0","data-language":"tsx","data-theme":"Lambda Studio — Blackout","children":["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","data-line-numbers":"","data-language":"tsx","data-theme":"Lambda Studio — Blackout","style":{"display":"grid"},"data-line-numbers-max-digits":"2","children":[["$","span",null,{"className":"line--highlighted","data-line":"","data-highlighted-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"import"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}],["$","span",null,{"style":{"color":"#FFF"},"children":" Avatar"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF"},"children":" AvatarImage"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF"},"children":" AvatarFallback "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" from"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"@/components/ui/avatar\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"export"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" default"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" function"}],["$","span",null,{"style":{"color":"#FFF","fontWeight":"bold"},"children":" Home"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"()"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" return"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" ("}]]}],"\n",["$","span",null,{"className":"line--highlighted","data-line":"","data-highlighted-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"Avatar"}],["$","span",null,{"style":{"color":"#FFF8"},"children":">"}]]}],"\n",["$","span",null,{"className":"line--highlighted","data-line":"","data-highlighted-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"AvatarImage src"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"https://github.com/shadcn.png\""}],["$","span",null,{"style":{"color":"#FFF"},"children":" alt"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"@shadcn\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":" />"}]]}],"\n",["$","span",null,{"className":"line--highlighted","data-line":"","data-highlighted-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"AvatarFallback"}],["$","span",null,{"style":{"color":"#FFF8"},"children":">"}],["$","span",null,{"style":{"color":"#FFF"},"children":"CN"}],["$","span",null,{"style":{"color":"#FFF8"},"children":""}]]}],"\n",["$","span",null,{"className":"line--highlighted","data-line":"","data-highlighted-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":" );"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}]}]]}]}],"$undefined","$undefined"]}]]}]}]]}],"\n",["$","h2",null,{"className":"font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0","id":"usage","children":[["$","a",null,{"className":"font-medium underline underline-offset-4 subheading-anchor","aria-label":"Link to section","href":"#usage","children":["$","span",null,{"className":"icon icon-link"}]}],"Usage"]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":[["$","pre",null,{"className":"mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900 Lambda Studio — Blackout","style":{"backgroundColor":"#000","color":"#fff"},"tabIndex":"0","data-language":"tsx","data-theme":"Lambda Studio — Blackout","children":["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","data-language":"tsx","data-theme":"Lambda Studio — Blackout","style":{"display":"grid"},"children":["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"import"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}],["$","span",null,{"style":{"color":"#FFF"},"children":" Avatar"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF"},"children":" AvatarFallback"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF"},"children":" AvatarImage "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" from"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"@/components/ui/avatar\""}]]}]}]}],"$undefined","$undefined"]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":[["$","pre",null,{"className":"mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900 Lambda Studio — Blackout","style":{"backgroundColor":"#000","color":"#fff"},"tabIndex":"0","data-language":"tsx","data-theme":"Lambda Studio — Blackout","children":["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","data-language":"tsx","data-theme":"Lambda Studio — Blackout","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"<"}],["$","span",null,{"style":{"color":"#FFF"},"children":"Avatar"}],["$","span",null,{"style":{"color":"#FFF8"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"AvatarImage src"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"https://github.com/shadcn.png\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"AvatarFallback"}],["$","span",null,{"style":{"color":"#FFF8"},"children":">"}],["$","span",null,{"style":{"color":"#FFF"},"children":"CN"}],["$","span",null,{"style":{"color":"#FFF8"},"children":""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":""}]]}]]}]}],"$undefined","$undefined"]}],"\n",["$","h2",null,{"className":"font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0","id":"examples","children":[["$","a",null,{"className":"font-medium underline underline-offset-4 subheading-anchor","aria-label":"Link to section","href":"#examples","children":["$","span",null,{"className":"icon icon-link"}]}],"Examples"]}],"\n",["$","h3",null,{"className":"font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight","id":"default-avatar","children":[["$","a",null,{"className":"font-medium underline underline-offset-4 subheading-anchor","aria-label":"Link to section","href":"#default-avatar","children":["$","span",null,{"className":"icon icon-link"}]}],"Default Avatar"]}],"\n",["$","$L20",null,{"name":"avatar-circle-example","children":["$","figure",null,{"__src__":"registry/default/example/avatar-circle-example.tsx","data-rehype-pretty-code-figure":"","children":[["$","pre",null,{"className":"mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900 Lambda Studio — Blackout","style":{"backgroundColor":"#000","color":"#fff"},"tabIndex":"0","data-language":"tsx","data-theme":"Lambda Studio — Blackout","children":["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","data-language":"tsx","data-theme":"Lambda Studio — Blackout","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"import"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}],["$","span",null,{"style":{"color":"#FFF"},"children":" Avatar"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF"},"children":" AvatarFallback"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF"},"children":" AvatarImage "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" from"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"@/components/ui/avatar\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"const"}],["$","span",null,{"style":{"color":"#FFF"},"children":" sizes "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":" ["}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"xs\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"sm\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"md\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"lg\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"xl\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"2xl\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":"]"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" as"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" const;"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"export"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" function"}],["$","span",null,{"style":{"color":"#FFF","fontWeight":"bold"},"children":" AvatarCircleExample"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"()"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" return"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"div className"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"flex flex-wrap items-end gap-4\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}],["$","span",null,{"style":{"color":"#FFF"},"children":"sizes"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"."}],["$","span",null,{"style":{"color":"#FFF"},"children":"map"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"(("}],["$","span",null,{"style":{"color":"#FFF"},"children":"size"}],["$","span",null,{"style":{"color":"#FFF8"},"children":")"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" =>"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"div key"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"={"}],["$","span",null,{"style":{"color":"#FFF"},"children":"size"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}],["$","span",null,{"style":{"color":"#FFF"},"children":" className"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"flex flex-col items-center gap-2\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"Avatar size"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"={"}],["$","span",null,{"style":{"color":"#FFF"},"children":"size"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}>"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"AvatarImage src"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"https://github.com/shadcn.png\""}],["$","span",null,{"style":{"color":"#FFF"},"children":" alt"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"@shadcn\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"AvatarFallback"}],["$","span",null,{"style":{"color":"#FFF8"},"children":">"}],["$","span",null,{"style":{"color":"#FFF"},"children":"CN"}],["$","span",null,{"style":{"color":"#FFF8"},"children":""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"span className"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"text-sm text-muted-foreground\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":">{"}],["$","span",null,{"style":{"color":"#FFF"},"children":"size"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":" ))}"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":" );"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}]}]]}]}],["$","$L1e",null,{"value":"import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\nconst sizes = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"2xl\"] as const;\n\nexport function AvatarCircleExample() {\n return (\n

\n {sizes.map((size) => (\n

\n \n \n CN\n \n {size}\n

\n ))}\n

\n );\n}\n","src":"registry/default/example/avatar-circle-example.tsx","event":"copy_usage_code","className":"absolute right-4 top-4"}],"$undefined"]}]}],"\n",["$","h3",null,{"className":"font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight","id":"rounded-avatar","children":[["$","a",null,{"className":"font-medium underline underline-offset-4 subheading-anchor","aria-label":"Link to section","href":"#rounded-avatar","children":["$","span",null,{"className":"icon icon-link"}]}],"Rounded Avatar"]}],"\n",["$","$L20",null,{"name":"avatar-rounded-example","children":["$","figure",null,{"__src__":"registry/default/example/avatar-rounded-example.tsx","data-rehype-pretty-code-figure":"","children":[["$","pre",null,{"className":"mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900 Lambda Studio — Blackout","style":{"backgroundColor":"#000","color":"#fff"},"tabIndex":"0","data-language":"tsx","data-theme":"Lambda Studio — Blackout","children":["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","data-language":"tsx","data-theme":"Lambda Studio — Blackout","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"import"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}],["$","span",null,{"style":{"color":"#FFF"},"children":" Avatar"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF"},"children":" AvatarFallback"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF"},"children":" AvatarImage "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" from"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"@/components/ui/avatar\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"const"}],["$","span",null,{"style":{"color":"#FFF"},"children":" sizes "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":" ["}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"xs\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"sm\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"md\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"lg\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"xl\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"2xl\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":"]"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" as"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" const;"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"export"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" function"}],["$","span",null,{"style":{"color":"#FFF","fontWeight":"bold"},"children":" AvatarRoundedExample"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"()"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" return"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"div className"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"flex flex-wrap items-end gap-4\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}],["$","span",null,{"style":{"color":"#FFF"},"children":"sizes"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"."}],["$","span",null,{"style":{"color":"#FFF"},"children":"map"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"(("}],["$","span",null,{"style":{"color":"#FFF"},"children":"size"}],["$","span",null,{"style":{"color":"#FFF8"},"children":")"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" =>"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"div key"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"={"}],["$","span",null,{"style":{"color":"#FFF"},"children":"size"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}],["$","span",null,{"style":{"color":"#FFF"},"children":" className"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"flex flex-col items-center gap-2\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"Avatar variant"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"rounded\""}],["$","span",null,{"style":{"color":"#FFF"},"children":" size"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"={"}],["$","span",null,{"style":{"color":"#FFF"},"children":"size"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}>"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"AvatarImage src"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"https://github.com/shadcn.png\""}],["$","span",null,{"style":{"color":"#FFF"},"children":" alt"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"@shadcn\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"AvatarFallback"}],["$","span",null,{"style":{"color":"#FFF8"},"children":">"}],["$","span",null,{"style":{"color":"#FFF"},"children":"CN"}],["$","span",null,{"style":{"color":"#FFF8"},"children":""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"span className"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"text-sm text-muted-foreground\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":">{"}],["$","span",null,{"style":{"color":"#FFF"},"children":"size"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":" ))}"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":" );"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}]}]]}]}],["$","$L1e",null,{"value":"import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\nconst sizes = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"2xl\"] as const;\n\nexport function AvatarRoundedExample() {\n return (\n

\n {sizes.map((size) => (\n

\n \n \n CN\n \n {size}\n

\n ))}\n

\n );\n}\n","src":"registry/default/example/avatar-rounded-example.tsx","event":"copy_usage_code","className":"absolute right-4 top-4"}],"$undefined"]}]}],"\n",["$","h3",null,{"className":"font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight","id":"square-avatar","children":[["$","a",null,{"className":"font-medium underline underline-offset-4 subheading-anchor","aria-label":"Link to section","href":"#square-avatar","children":["$","span",null,{"className":"icon icon-link"}]}],"Square Avatar"]}],"\n",["$","$L20",null,{"name":"avatar-square-example","children":["$","figure",null,{"__src__":"registry/default/example/avatar-square-example.tsx","data-rehype-pretty-code-figure":"","children":[["$","pre",null,{"className":"mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900 Lambda Studio — Blackout","style":{"backgroundColor":"#000","color":"#fff"},"tabIndex":"0","data-language":"tsx","data-theme":"Lambda Studio — Blackout","children":["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","data-language":"tsx","data-theme":"Lambda Studio — Blackout","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"import"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}],["$","span",null,{"style":{"color":"#FFF"},"children":" Avatar"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF"},"children":" AvatarFallback"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF"},"children":" AvatarImage "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" from"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"@/components/ui/avatar\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"const"}],["$","span",null,{"style":{"color":"#FFF"},"children":" sizes "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":" ["}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"xs\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"sm\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"md\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"lg\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"xl\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"2xl\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":"]"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" as"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" const;"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"export"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" function"}],["$","span",null,{"style":{"color":"#FFF","fontWeight":"bold"},"children":" AvatarSquareExample"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"()"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" return"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"div className"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"flex flex-wrap items-end gap-4\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}],["$","span",null,{"style":{"color":"#FFF"},"children":"sizes"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"."}],["$","span",null,{"style":{"color":"#FFF"},"children":"map"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"(("}],["$","span",null,{"style":{"color":"#FFF"},"children":"size"}],["$","span",null,{"style":{"color":"#FFF8"},"children":")"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" =>"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"div key"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"={"}],["$","span",null,{"style":{"color":"#FFF"},"children":"size"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}],["$","span",null,{"style":{"color":"#FFF"},"children":" className"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"flex flex-col items-center gap-2\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"Avatar variant"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"square\""}],["$","span",null,{"style":{"color":"#FFF"},"children":" size"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"={"}],["$","span",null,{"style":{"color":"#FFF"},"children":"size"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}>"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"AvatarImage src"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"https://github.com/shadcn.png\""}],["$","span",null,{"style":{"color":"#FFF"},"children":" alt"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"@shadcn\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"AvatarFallback"}],["$","span",null,{"style":{"color":"#FFF8"},"children":">"}],["$","span",null,{"style":{"color":"#FFF"},"children":"CN"}],["$","span",null,{"style":{"color":"#FFF8"},"children":""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"span className"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"text-sm text-muted-foreground\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":">{"}],["$","span",null,{"style":{"color":"#FFF"},"children":"size"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":" ))}"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":" );"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}]}]]}]}],["$","$L1e",null,{"value":"import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\nconst sizes = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"2xl\"] as const;\n\nexport function AvatarSquareExample() {\n return (\n

\n {sizes.map((size) => (\n

\n \n \n CN\n \n {size}\n

\n ))}\n

\n );\n}\n","src":"registry/default/example/avatar-square-example.tsx","event":"copy_usage_code","className":"absolute right-4 top-4"}],"$undefined"]}]}],"\n",["$","h3",null,{"className":"font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight","id":"avatar-with-fallback","children":[["$","a",null,{"className":"font-medium underline underline-offset-4 subheading-anchor","aria-label":"Link to section","href":"#avatar-with-fallback","children":["$","span",null,{"className":"icon icon-link"}]}],"Avatar with Fallback"]}],"\n",["$","p",null,{"className":"leading-7 [&:not(:first-child)]:mt-6","children":["When an image fails to load or is not provided, the ",["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","children":"AvatarFallback"}]," component is displayed."]}],"\n",["$","$L20",null,{"name":"avatar-fallback-example","children":["$","figure",null,{"__src__":"registry/default/example/avatar-fallback-example.tsx","data-rehype-pretty-code-figure":"","children":[["$","pre",null,{"className":"mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900 Lambda Studio — Blackout","style":{"backgroundColor":"#000","color":"#fff"},"tabIndex":"0","data-language":"tsx","data-theme":"Lambda Studio — Blackout","children":["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","data-language":"tsx","data-theme":"Lambda Studio — Blackout","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"import"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}],["$","span",null,{"style":{"color":"#FFF"},"children":" Avatar"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF"},"children":" AvatarFallback "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" from"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"@/components/ui/avatar\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"const"}],["$","span",null,{"style":{"color":"#FFF"},"children":" sizes "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":" ["}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"xs\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"sm\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"md\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"lg\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"xl\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"2xl\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":"]"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" as"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" const;"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"export"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" function"}],["$","span",null,{"style":{"color":"#FFF","fontWeight":"bold"},"children":" AvatarFallbackExample"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"()"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" return"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"div className"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"flex flex-wrap items-end gap-4\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}],["$","span",null,{"style":{"color":"#FFF"},"children":"sizes"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"."}],["$","span",null,{"style":{"color":"#FFF"},"children":"map"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"(("}],["$","span",null,{"style":{"color":"#FFF"},"children":"size"}],["$","span",null,{"style":{"color":"#FFF8"},"children":")"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" =>"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"div key"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"={"}],["$","span",null,{"style":{"color":"#FFF"},"children":"size"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}],["$","span",null,{"style":{"color":"#FFF"},"children":" className"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"flex flex-col items-center gap-2\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"Avatar size"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"={"}],["$","span",null,{"style":{"color":"#FFF"},"children":"size"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}>"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"AvatarFallback"}],["$","span",null,{"style":{"color":"#FFF8"},"children":">"}],["$","span",null,{"style":{"color":"#FFF"},"children":"CN"}],["$","span",null,{"style":{"color":"#FFF8"},"children":""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"span className"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"text-sm text-muted-foreground\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":">{"}],["$","span",null,{"style":{"color":"#FFF"},"children":"size"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":" ))}"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":" );"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}]}]]}]}],["$","$L1e",null,{"value":"import { Avatar, AvatarFallback } from \"@/components/ui/avatar\";\n\nconst sizes = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"2xl\"] as const;\n\nexport function AvatarFallbackExample() {\n return (\n

\n {sizes.map((size) => (\n

\n \n CN\n \n {size}\n

\n ))}\n

\n );\n}\n","src":"registry/default/example/avatar-fallback-example.tsx","event":"copy_usage_code","className":"absolute right-4 top-4"}],"$undefined"]}]}],"\n",["$","h3",null,{"className":"font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight","id":"avatar-group","children":[["$","a",null,{"className":"font-medium underline underline-offset-4 subheading-anchor","aria-label":"Link to section","href":"#avatar-group","children":["$","span",null,{"className":"icon icon-link"}]}],"Avatar Group"]}],"\n",["$","p",null,{"className":"leading-7 [&:not(:first-child)]:mt-6","children":"Combine multiple avatars to create a group display."}],"\n",["$","$L20",null,{"name":"avatar-group-example","children":["$","figure",null,{"__src__":"registry/default/example/avatar-group-example.tsx","data-rehype-pretty-code-figure":"","children":[["$","pre",null,{"className":"mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900 Lambda Studio — Blackout","style":{"backgroundColor":"#000","color":"#fff"},"tabIndex":"0","data-language":"tsx","data-theme":"Lambda Studio — Blackout","children":["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","data-language":"tsx","data-theme":"Lambda Studio — Blackout","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"import"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}],["$","span",null,{"style":{"color":"#FFF"},"children":" Avatar"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF"},"children":" AvatarFallback"}],["$","span",null,{"style":{"color":"#FFF8"},"children":","}],["$","span",null,{"style":{"color":"#FFF"},"children":" AvatarImage "}],["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" from"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" \"@/components/ui/avatar\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":"export"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" function"}],["$","span",null,{"style":{"color":"#FFF","fontWeight":"bold"},"children":" AvatarGroupExample"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"()"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" return"}],["$","span",null,{"style":{"color":"#FFF8"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"div className"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"flex -space-x-4\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"Avatar"}],["$","span",null,{"style":{"color":"#FFF8"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"AvatarImage src"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"https://github.com/shadcn.png\""}],["$","span",null,{"style":{"color":"#FFF"},"children":" alt"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"@shadcn\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"AvatarFallback"}],["$","span",null,{"style":{"color":"#FFF8"},"children":">"}],["$","span",null,{"style":{"color":"#FFF"},"children":"CN"}],["$","span",null,{"style":{"color":"#FFF8"},"children":""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"Avatar"}],["$","span",null,{"style":{"color":"#FFF8"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"AvatarImage src"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"https://github.com/tj.png\""}],["$","span",null,{"style":{"color":"#FFF"},"children":" alt"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"@tj\""}],["$","span",null,{"style":{"color":"#FFF8"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"AvatarFallback"}],["$","span",null,{"style":{"color":"#FFF8"},"children":">"}],["$","span",null,{"style":{"color":"#FFF"},"children":"TJ"}],["$","span",null,{"style":{"color":"#FFF8"},"children":""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"Avatar"}],["$","span",null,{"style":{"color":"#FFF8"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"AvatarImage"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" src"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"https://github.com/ianstormtaylor.png\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF"},"children":" alt"}],["$","span",null,{"style":{"color":"#FFF8"},"children":"="}],["$","span",null,{"style":{"color":"#FFF8"},"children":"\"@ianstormtaylor\""}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":" />"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"AvatarFallback"}],["$","span",null,{"style":{"color":"#FFF8"},"children":">"}],["$","span",null,{"style":{"color":"#FFF"},"children":"IT"}],["$","span",null,{"style":{"color":"#FFF8"},"children":""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"Avatar"}],["$","span",null,{"style":{"color":"#FFF8"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" <"}],["$","span",null,{"style":{"color":"#FFF"},"children":"AvatarFallback"}],["$","span",null,{"style":{"color":"#FFF8"},"children":">"}],["$","span",null,{"style":{"color":"#FFF"},"children":"+2"}],["$","span",null,{"style":{"color":"#FFF8"},"children":""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFF8"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":" );"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#FFF8"},"children":"}"}]}]]}]}],["$","$L1e",null,{"value":"import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\nexport function AvatarGroupExample() {\n return (\n

\n \n \n CN\n \n \n \n TJ\n \n \n \n IT\n \n \n +2\n \n

\n );\n}\n","src":"registry/default/example/avatar-group-example.tsx","event":"copy_usage_code","className":"absolute right-4 top-4"}],"$undefined"]}]}],"\n",["$","h2",null,{"className":"font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0","id":"props","children":[["$","a",null,{"className":"font-medium underline underline-offset-4 subheading-anchor","aria-label":"Link to section","href":"#props","children":["$","span",null,{"className":"icon icon-link"}]}],"Props"]}],"\n",["$","div",null,{"className":"my-6 w-full overflow-y-auto","children":["$","table",null,{"className":"w-full","children":[["$","thead",null,{"children":["$","tr",null,{"className":"m-0 border-t p-0","children":[["$","th",null,{"className":"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right","children":"Prop"}],["$","th",null,{"className":"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right","children":"Type"}],["$","th",null,{"className":"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right","children":"Description"}],["$","th",null,{"className":"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right","children":"Default"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"m-0 border-t p-0","children":[["$","td",null,{"className":"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right","children":"variant"}],["$","td",null,{"className":"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right","children":[["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","children":"circle"}]," | ",["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","children":"square"}]," | ",["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","children":"rounded"}]]}],["$","td",null,{"className":"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right","children":"Shape of the avatar"}],["$","td",null,{"className":"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right","children":["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","children":"circle"}]}]]}],["$","tr",null,{"className":"m-0 border-t p-0","children":[["$","td",null,{"className":"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right","children":"size"}],["$","td",null,{"className":"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right","children":[["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","children":"xs"}]," | ",["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","children":"sm"}]," | ",["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","children":"md"}]," | ",["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","children":"lg"}]," | ",["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","children":"xl"}]," | ",["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","children":"2xl"}]]}],["$","td",null,{"className":"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right","children":"Size of the avatar"}],["$","td",null,{"className":"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right","children":["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","children":"md"}]}]]}],["$","tr",null,{"className":"m-0 border-t p-0","children":[["$","td",null,{"className":"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right","children":"className"}],["$","td",null,{"className":"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right","children":["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","children":"string"}]}],["$","td",null,{"className":"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right","children":"Additional CSS classes"}],["$","td",null,{"className":"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right","children":"-"}]]}]]}]]}]}],"\n",["$","h3",null,{"className":"font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight","id":"supported-html-attributes","children":[["$","a",null,{"className":"font-medium underline underline-offset-4 subheading-anchor","aria-label":"Link to section","href":"#supported-html-attributes","children":["$","span",null,{"className":"icon icon-link"}]}],"Supported HTML Attributes"]}],"\n",["$","p",null,{"className":"leading-7 [&:not(:first-child)]:mt-6","children":["Because the Button uses Radix UI, it inherits and supports ",["$","strong",null,{"children":"all standard HTML image attributes"}],", including:"]}],"\n",["$","ul",null,{"className":"ml-6 list-disc","children":["\n",["$","li",null,{"className":"mt-2","children":["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","children":"src"}]}],"\n",["$","li",null,{"className":"mt-2","children":["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","children":"alt"}]}],"\n",["$","li",null,{"className":"mt-2","children":["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","children":"width"}]}],"\n",["$","li",null,{"className":"mt-2","children":["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","children":"height"}]}],"\n",["$","li",null,{"className":"mt-2","children":[["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","children":"aria-*"}]," attributes"]}],"\n",["$","li",null,{"className":"mt-2","children":[["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","children":"data-*"}]," attributes"]}],"\n",["$","li",null,{"className":"mt-2","children":["Event handlers like ",["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","children":"onError"}],", ",["$","code",null,{"className":"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm","children":"onLoad"}],", etc."]}],"\n"]}],"\n",["$","p",null,{"className":"leading-7 [&:not(:first-child)]:mt-6","children":"The Avatar component uses Radix UI's primitives, ensuring proper accessibility, keyboard navigation and semantic HTML."}]]}]}],["$","div",null,{"className":"flex flex-row items-center justify-between","children":[["$","$L21",null,{"href":"/docs/installation/manual","className":"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2","children":[["$","svg",null,{"width":"15","height":"15","viewBox":"0 0 15 15","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"mr-2 size-4","children":["$","path",null,{"d":"M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z","fill":"currentColor","fillRule":"evenodd","clipRule":"evenodd"}]}],"Manual"]}],["$","$L21",null,{"href":"/docs/components/button","className":"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 ml-auto","children":["Button",["$","svg",null,{"width":"15","height":"15","viewBox":"0 0 15 15","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"ml-2 size-4","children":["$","path",null,{"d":"M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z","fill":"currentColor","fillRule":"evenodd","clipRule":"evenodd"}]}]]}]]}]]}],["$","div",null,{"className":"hidden text-sm xl:block","children":["$","div",null,{"className":"sticky top-16 -mt-10 pt-4","children":["$","$La",null,{"className":"pb-10","children":["$","div",null,{"className":"sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] space-y-4 py-12","children":[["$","$L22",null,{"toc":{"items":[{"url":"#installation","title":"Installation"},{"url":"#usage","title":"Usage"},{"url":"#examples","title":"Examples","items":[{"url":"#default-avatar","title":"Default Avatar"},{"url":"#rounded-avatar","title":"Rounded Avatar"},{"url":"#square-avatar","title":"Square Avatar"},{"url":"#avatar-with-fallback","title":"Avatar with Fallback"},{"url":"#avatar-group","title":"Avatar Group"}]},{"url":"#props","title":"Props","items":[{"url":"#supported-html-attributes","title":"Supported HTML Attributes"}]}]}}],["$","div",null,{"className":"space-y-2","children":[["$","p",null,{"className":"font-medium","children":"Contribute"}],["$","ul",null,{"className":"m-0 list-none","children":[["$","li","0",{"className":"mt-0 pt-2","children":["$","$L21",null,{"href":"https://github.com/BankkRoll/shaduxe-ui/issues/new?title=%5Bbug%5D%3A+%2Fdocs%2Fcomponents%2Favatar&labels=bug&labels=documentation&template=bug_report.md","target":"_blank","rel":"noopener noreferrer","className":"inline-flex items-center text-sm text-muted-foreground transition-colors hover:text-foreground","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-bug mr-2 size-4","children":[["$","path","fmnt4t",{"d":"m8 2 1.88 1.88"}],["$","path","qol33r",{"d":"M14.12 3.88 16 2"}],["$","path","d7y7pr",{"d":"M9 7.13v-1a3.003 3.003 0 1 1 6 0v1"}],["$","path","xs1cw7",{"d":"M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6"}],["$","path","1qisl0",{"d":"M12 20v-9"}],["$","path","32zzws",{"d":"M6.53 9C4.6 8.8 3 7.1 3 5"}],["$","path","82j7cp",{"d":"M6 13H2"}],["$","path","4p0ekp",{"d":"M3 21c0-2.1 1.7-3.9 3.8-4"}],["$","path","18gb23",{"d":"M20.97 5c0 2.1-1.6 3.8-3.5 4"}],["$","path","1jl80f",{"d":"M22 13h-4"}],["$","path","k3fwyw",{"d":"M17.2 17c2.1.1 3.8 1.9 3.8 4"}],"$undefined"]}],"Report an issue"]}]}],["$","li","1",{"className":"mt-0 pt-2","children":["$","$L21",null,{"href":"https://github.com/BankkRoll/shaduxe-ui/issues/new?title=%5Bfeat%5D%3A+%2Fdocs%2Fcomponents%2Favatar&labels=enhancement&template=feature_request.md","target":"_blank","rel":"noopener noreferrer","className":"inline-flex items-center text-sm text-muted-foreground transition-colors hover:text-foreground","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-lightbulb mr-2 size-4","children":[["$","path","1gvzjb",{"d":"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"}],["$","path","x1upvd",{"d":"M9 18h6"}],["$","path","ceow96",{"d":"M10 22h4"}],"$undefined"]}],"Request a feature"]}]}],["$","li","2",{"className":"mt-0 pt-2","children":["$","$L21",null,{"href":"https://github.com/BankkRoll/shaduxe-ui/blob/main/content/docs/components/avatar.mdx","target":"_blank","rel":"noopener noreferrer","className":"inline-flex items-center text-sm text-muted-foreground transition-colors hover:text-foreground","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-pencil mr-2 size-4","children":[["$","path","1a8usu",{"d":"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"}],["$","path","1mk7zo",{"d":"m15 5 4 4"}],"$undefined"]}],"Edit this page"]}]}]]}]]}]]}]}]}]}]]}]