) } `,__src__:"registry/miami/example/skeleton-demo.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Skeleton } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/skeleton'"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" SkeletonDemo"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"flex items-center space-x-4"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Skeleton"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"size-12 rounded-full"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"space-y-2"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Skeleton"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"h-4 w-[250px]"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Skeleton"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"h-4 w-[200px]"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,l.jsx)(e.figure,{__src__:"registry/default/example/skeleton-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { Skeleton } from '~/components/ui/skeleton' export function SkeletonDemo() { return (

) } `,__src__:"registry/default/example/skeleton-demo.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Skeleton } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/skeleton'"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" SkeletonDemo"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"flex items-center space-x-4"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Skeleton"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"size-12 rounded-full"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"space-y-2"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Skeleton"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"h-4 w-[250px]"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Skeleton"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"h-4 w-[200px]"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),` `,(0,l.jsxs)(e.h2,{id:"installation",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,l.jsxs)(p,{defaultValue:"cli",children:[(0,l.jsxs)(h,{children:[(0,l.jsx)(i,{value:"cli",children:"CLI"}),(0,l.jsx)(i,{value:"manual",children:"Manual"})]}),(0,l.jsx)(t,{value:"cli",children:(0,l.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"bash","data-theme":"github-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,l.jsx)(e.code,{"data-language":"bash","data-theme":"github-dark",style:{display:"grid"},children:(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"npx"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" nyxb@latest"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" add"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" skeleton"})]})})})})}),(0,l.jsx)(t,{value:"manual",children:(0,l.jsxs)(d,{children:[(0,l.jsx)(a,{children:"Copy and paste the following code into your project."}),(0,l.jsxs)(c,{name:"skeleton",children:[(0,l.jsx)(e.figure,{__src__:"registry/miami/ui/skeleton.tsx",__style__:"miami","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-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,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { ny } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" '~/lib/utils'"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" Skeleton"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ..."}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"props"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" React"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"HTMLAttributes"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"HTMLDivElement"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">) {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ny"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'bg-primary/10 animate-pulse rounded-md'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", className)}"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props}"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Skeleton }"})]})]})})}),(0,l.jsx)(e.figure,{__src__:"registry/default/ui/skeleton.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-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,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { ny } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" '~/lib/utils'"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" Skeleton"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ..."}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"props"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" React"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"HTMLAttributes"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"HTMLDivElement"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">) {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ny"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'bg-muted animate-pulse rounded-md'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", className)}"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props}"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Skeleton }"})]})]})})})]}),(0,l.jsx)(a,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,l.jsxs)(e.h2,{id:"usage",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,l.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { Skeleton } from "~/components/ui/skeleton" `,children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Skeleton } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "~/components/ui/skeleton"'})]})})})}),` `,(0,l.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:` `,children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Skeleton"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"w-[100px] h-[20px] rounded-full"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]})})})}),` `,(0,l.jsxs)(e.h2,{id:"examples",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#examples",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Examples"]}),` `,(0,l.jsxs)(e.h3,{id:"card",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#card",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Card"]}),` `,(0,l.jsxs)(r,{name:"skeleton-card",description:"A card with skeleton showing a loading state.",children:[(0,l.jsx)(e.figure,{__src__:"registry/miami/example/skeleton-card.tsx","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { Skeleton } from '~/components/ui/skeleton' export function SkeletonCard() { return (

) } `,__src__:"registry/miami/example/skeleton-card.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Skeleton } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/skeleton'"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" SkeletonCard"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"flex flex-col space-y-3"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Skeleton"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"h-[125px] w-[250px] rounded-xl"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"space-y-2"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Skeleton"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"h-4 w-[250px]"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Skeleton"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"h-4 w-[200px]"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,l.jsx)(e.figure,{__src__:"registry/default/example/skeleton-card.tsx","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { Skeleton } from '~/components/ui/skeleton' export function SkeletonCard() { return (

) } `,__src__:"registry/default/example/skeleton-card.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Skeleton } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/skeleton'"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" SkeletonCard"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"flex flex-col space-y-3"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Skeleton"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"h-[125px] w-[250px] rounded-xl"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"space-y-2"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Skeleton"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"h-4 w-[250px]"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Skeleton"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"h-4 w-[200px]"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]})]})}function u(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,{...n,children:(0,l.jsx)(F,{...n})}):F(n)}function s(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return N(C);})(); ;return Component;