) } `,__src__:"src/demo/skeleton-demo.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#7ECBC7"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:" { Skeleton } "}),(0,n.jsx)(e.span,{style:{color:"#7ECBC7"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#DEA060"},children:'"@/components/ui/skeleton"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#7ECBC7"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#7ECBC7"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#EEEEEE",fontWeight:"bold"},children:"SkeletonDemo"}),(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#7ECBC7"},children:"return"}),(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#84BFF9"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#AF9CFF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#DEA060"},children:'"w-full space-y-2"'}),(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#84BFF9"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#AF9CFF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#DEA060"},children:'"flex gap-2"'}),(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#84BFF9"},children:"Skeleton"}),(0,n.jsx)(e.span,{style:{color:"#AF9CFF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#DEA060"},children:'"w-8 h-8 flex-none rounded-full"'}),(0,n.jsx)(e.span,{style:{color:"#AF9CFF"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:"/>"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#84BFF9"},children:"Skeleton"}),(0,n.jsx)(e.span,{style:{color:"#AF9CFF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#DEA060"},children:'"h-8"'}),(0,n.jsx)(e.span,{style:{color:"#AF9CFF"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:"/>"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#84BFF9"},children:"Skeleton"}),(0,n.jsx)(e.span,{style:{color:"#AF9CFF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#DEA060"},children:'"h-32"'}),(0,n.jsx)(e.span,{style:{color:"#AF9CFF"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:"/>"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:" "})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:" )"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:"}"})})]})})})}),` `,(0,n.jsxs)(e.h2,{id:"installation",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx @rahimstack@latest add skeleton `,children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:"npx "}),(0,n.jsx)(e.span,{style:{color:"#DEA060"},children:"@rahimstack@latest"}),(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#DEA060"},children:"add"}),(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#DEA060"},children:"skeleton"})]})})})}),` `,(0,n.jsxs)(e.h2,{id:"api-reference",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#api-reference",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"API Reference"]}),` `,(0,n.jsxs)(a,{name:"skeleton",children:[(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`const SkeletonAnatomy = defineStyleAnatomy({ root: cva([ "UI-Skeleton__root", "animate-pulse rounded-md bg-[--subtle] w-full h-12", ]), })`,__src__:"src/workshop/skeleton/skeleton.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#7ECBC7"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:" SkeletonAnatomy = "}),(0,n.jsx)(e.span,{style:{color:"#EBC88D"},children:"defineStyleAnatomy"}),(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:"({"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:" root: "}),(0,n.jsx)(e.span,{style:{color:"#EBC88D"},children:"cva"}),(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:"(["})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#DEA060"},children:'"UI-Skeleton__root"'}),(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#DEA060"},children:'"animate-pulse rounded-md bg-[--subtle] w-full h-12"'}),(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:","})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:" ]),"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:"})"})})]})})}),(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:'type SkeletonProps = React.ComponentPropsWithoutRef<"div">',__src__:"src/workshop/skeleton/skeleton.tsx",children:(0,n.jsx)(e.code,{"data-language":"tsx","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#7ECBC7"},children:"type"}),(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#84BFF9"},children:"SkeletonProps"}),(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:" = "}),(0,n.jsx)(e.span,{style:{color:"#84BFF9"},children:"React"}),(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#84BFF9"},children:"ComponentPropsWithoutRef"}),(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#DEA060"},children:'"div"'}),(0,n.jsx)(e.span,{style:{color:"#CACACA"},children:">"})]})})})})]})]})}function k(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(d,l)})):d(l)}var N=k;function C(l,e){throw new Error("Expected "+(e?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return _(E);})(); ;return Component;

Skeleton

Installation

API Reference

Types

Anatomy