) } `,__src__:"registry/miami/examples/skeleton-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"lumos-dark",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"Skeleton"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"~/components/ui/skeleton"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#FEE75C"},children:" SkeletonDemo"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"flex items-center space-x-4"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#9945FF"},children:"Skeleton"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"size-12 rounded-full"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"space-y-2"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#9945FF"},children:"Skeleton"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"h-4 w-[250px]"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#9945FF"},children:"Skeleton"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"h-4 w-[200px]"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" )"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})})]})})}),(0,e.jsx)(l.figure,{__src__:"registry/default/examples/skeleton-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"tsx","data-theme":"lumos-dark",__rawString__:`import { Skeleton } from "~/components/ui/skeleton" export function SkeletonDemo() { return (

) } `,__src__:"registry/default/examples/skeleton-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"lumos-dark",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"Skeleton"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"~/components/ui/skeleton"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#FEE75C"},children:" SkeletonDemo"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"flex items-center space-x-4"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#9945FF"},children:"Skeleton"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"size-12 rounded-full"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"space-y-2"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#9945FF"},children:"Skeleton"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"h-4 w-[250px]"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#9945FF"},children:"Skeleton"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"h-4 w-[200px]"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" )"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})})]})})})]}),` `,(0,e.jsxs)(l.h2,{id:"installation",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,e.jsxs)(p,{defaultValue:"cli",children:[(0,e.jsxs)(h,{children:[(0,e.jsx)(d,{value:"cli",children:"CLI"}),(0,e.jsx)(d,{value:"manual",children:"Manual"})]}),(0,e.jsx)(t,{value:"cli",children:(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"bash","data-theme":"lumos-dark",__rawString__:`npx nyxb@latest add skeleton `,__npmCommand__:`npx nyxb@latest add skeleton `,__yarnCommand__:`npx nyxb@latest add skeleton `,__pnpmCommand__:`pnpm dlx nyxb@latest add skeleton `,__bunCommand__:`bunx --bun nyxb@latest add skeleton `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"lumos-dark",style:{display:"grid"},children:(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FEE75C"},children:"npx"}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:" nyxb@latest"}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:" add"}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:" skeleton"})]})})})})}),(0,e.jsx)(t,{value:"manual",children:(0,e.jsxs)(i,{children:[(0,e.jsx)(r,{children:"Copy and paste the following code into your project."}),(0,e.jsxs)(o,{name:"skeleton",children:[(0,e.jsx)(l.figure,{__src__:"registry/miami/ui/skeleton.tsx",__style__:"miami","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"tsx","data-theme":"lumos-dark",__rawString__:`import { ny } from "~/lib/utils" function Skeleton({ className, ...props }: React.HTMLAttributes) { return (

) } export { Skeleton } `,__src__:"registry/miami/ui/skeleton.tsx",__style__:"miami",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"lumos-dark",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"ny"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"~/lib/utils"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#FEE75C"},children:" Skeleton"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:" ..."}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"props"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#CCFF00"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#CCFF00"},children:"HTMLAttributes"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#CCFF00"},children:"HTMLDivElement"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:">) {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"div"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FEE75C"},children:"ny"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"bg-primary/10 animate-pulse rounded-md"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" />"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" )"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"Skeleton"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" }"})]})]})})}),(0,e.jsx)(l.figure,{__src__:"registry/default/ui/skeleton.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"tsx","data-theme":"lumos-dark",__rawString__:`import { ny } from "~/lib/utils" function Skeleton({ className, ...props }: React.HTMLAttributes) { return (

) } export { Skeleton } `,__src__:"registry/default/ui/skeleton.tsx",__style__:"default",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"lumos-dark",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"ny"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"~/lib/utils"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#FEE75C"},children:" Skeleton"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:" ..."}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"props"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#CCFF00"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#CCFF00"},children:"HTMLAttributes"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#CCFF00"},children:"HTMLDivElement"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:">) {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"div"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FEE75C"},children:"ny"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"bg-muted animate-pulse rounded-md"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" />"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" )"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"Skeleton"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" }"})]})]})})})]}),(0,e.jsx)(r,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,e.jsxs)(l.h2,{id:"usage",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"tsx","data-theme":"lumos-dark",__rawString__:`import { Skeleton } from "~/components/ui/skeleton" `,children:(0,e.jsx)(l.code,{"data-language":"tsx","data-theme":"lumos-dark",style:{display:"grid"},children:(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"Skeleton"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"~/components/ui/skeleton"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]})})})}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"tsx","data-theme":"lumos-dark",__rawString__:` `,children:(0,e.jsx)(l.code,{"data-language":"tsx","data-theme":"lumos-dark",style:{display:"grid"},children:(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9945FF"},children:"Skeleton"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"w-[100px] h-[20px] rounded-full"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" />"})]})})})}),` `,(0,e.jsxs)(l.h2,{id:"examples",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#examples",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Examples"]}),` `,(0,e.jsxs)(l.h3,{id:"card",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#card",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Card"]}),` `,(0,e.jsxs)(s,{name:"skeleton-card",description:"A card with skeleton showing a loading state.",children:[(0,e.jsx)(l.figure,{__src__:"registry/miami/examples/skeleton-card.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"tsx","data-theme":"lumos-dark",__rawString__:`import { Skeleton } from "~/components/ui/skeleton" export function SkeletonCard() { return (

) } `,__src__:"registry/miami/examples/skeleton-card.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"lumos-dark",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"Skeleton"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"~/components/ui/skeleton"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#FEE75C"},children:" SkeletonCard"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"flex flex-col space-y-3"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#9945FF"},children:"Skeleton"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"h-[125px] w-[250px] rounded-xl"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"space-y-2"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#9945FF"},children:"Skeleton"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"h-4 w-[250px]"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#9945FF"},children:"Skeleton"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"h-4 w-[200px]"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" )"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})})]})})}),(0,e.jsx)(l.figure,{__src__:"registry/default/examples/skeleton-card.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"tsx","data-theme":"lumos-dark",__rawString__:`import { Skeleton } from "~/components/ui/skeleton" export function SkeletonCard() { return (

) } `,__src__:"registry/default/examples/skeleton-card.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"lumos-dark",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"Skeleton"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"~/components/ui/skeleton"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#FEE75C"},children:" SkeletonCard"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"flex flex-col space-y-3"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#9945FF"},children:"Skeleton"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"h-[125px] w-[250px] rounded-xl"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"space-y-2"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#9945FF"},children:"Skeleton"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"h-4 w-[250px]"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#9945FF"},children:"Skeleton"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"h-4 w-[200px]"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" )"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})})]})})})]})]})}function m(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,{...n,children:(0,e.jsx)(D,{...n})}):D(n)}function a(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return f(b);})(); ;return Component;