{"name":"skeleton","title":"Skeleton","description":"Use to show a placeholder while content is loading.","installCommand":"bunx marko-ui add skeleton -y","usageTags":"<Skeleton>","importSnippet":"import Skeleton from \"@/components/ui/skeleton/skeleton.marko\";","usageSnippet":"<Skeleton class=\"h-[20px] w-[100px] rounded-full\"/>","tags":["Skeleton"],"parts":[],"props":[],"events":[],"keyboard":[],"accessibilityNotes":["`Skeleton` renders a plain `<div>` with no ARIA role of its own — it communicates loading state visually, not to assistive technology.","Wrap the region being replaced in a live region (e.g. `aria-busy=\"true\"` or `aria-live=\"polite\"` on a parent) so screen reader users are told content is loading, and update or remove it once real content renders."],"examples":[{"id":"skeleton-demo","title":"Basic","source":"import Skeleton from \"@marko-ui/shadcn/ui/skeleton/skeleton.marko\";\n\n<div class=\"flex items-center space-x-4\">\n  <Skeleton class=\"h-12 w-12 rounded-full\"/>\n  <div class=\"space-y-2\">\n    <Skeleton class=\"h-4 w-[250px]\"/>\n    <Skeleton class=\"h-4 w-[200px]\"/>\n  </div>\n</div>","description":"An avatar and two lines of text, each represented by a skeleton."},{"id":"skeleton-avatar","title":"Avatar","source":"import Skeleton from \"@marko-ui/shadcn/ui/skeleton/skeleton.marko\";\n\n<div class=\"flex w-fit items-center gap-4\">\n  <Skeleton class=\"size-10 shrink-0 rounded-full\"/>\n  <div class=\"grid gap-2\">\n    <Skeleton class=\"h-4 w-[150px]\"/>\n    <Skeleton class=\"h-4 w-[100px]\"/>\n  </div>\n</div>","description":"A circular skeleton for an avatar, paired with two lines of text."},{"id":"skeleton-card","title":"Card","source":"import Skeleton from \"@marko-ui/shadcn/ui/skeleton/skeleton.marko\";\n\n<div class=\"flex flex-col space-y-3\">\n  <Skeleton class=\"h-[125px] w-[250px] rounded-xl\"/>\n  <div class=\"space-y-2\">\n    <Skeleton class=\"h-4 w-[250px]\"/>\n    <Skeleton class=\"h-4 w-[200px]\"/>\n  </div>\n</div>","description":"A larger skeleton for an image or media block, paired with text lines."},{"id":"skeleton-text","title":"Text","source":"import Skeleton from \"@marko-ui/shadcn/ui/skeleton/skeleton.marko\";\n\n<div class=\"w-[300px] space-y-2\">\n  <Skeleton class=\"h-4 w-full\"/>\n  <Skeleton class=\"h-4 w-full\"/>\n  <Skeleton class=\"h-4 w-3/4\"/>\n</div>","description":"A paragraph of loading text, with the last line shorter than the rest."},{"id":"skeleton-form","title":"Form","source":"import Skeleton from \"@marko-ui/shadcn/ui/skeleton/skeleton.marko\";\n\n<div class=\"flex w-full max-w-xs flex-col gap-7\">\n  <div class=\"flex flex-col gap-3\">\n    <Skeleton class=\"h-4 w-20\"/>\n    <Skeleton class=\"h-8 w-full\"/>\n  </div>\n  <div class=\"flex flex-col gap-3\">\n    <Skeleton class=\"h-4 w-24\"/>\n    <Skeleton class=\"h-8 w-full\"/>\n  </div>\n  <Skeleton class=\"h-8 w-24\"/>\n</div>","description":"Skeleton placeholders for labeled form fields and a submit button."},{"id":"skeleton-table","title":"Table","source":"import Skeleton from \"@marko-ui/shadcn/ui/skeleton/skeleton.marko\";\n\n<div class=\"w-full max-w-md space-y-2\">\n  <div class=\"flex gap-4\">\n    <Skeleton class=\"h-4 flex-1\"/>\n    <Skeleton class=\"h-4 w-24\"/>\n    <Skeleton class=\"h-4 w-20\"/>\n  </div>\n  <div class=\"flex gap-4\">\n    <Skeleton class=\"h-4 flex-1\"/>\n    <Skeleton class=\"h-4 w-24\"/>\n    <Skeleton class=\"h-4 w-20\"/>\n  </div>\n  <div class=\"flex gap-4\">\n    <Skeleton class=\"h-4 flex-1\"/>\n    <Skeleton class=\"h-4 w-24\"/>\n    <Skeleton class=\"h-4 w-20\"/>\n  </div>\n</div>","description":"Skeleton rows for a table, each column a different width."},{"id":"skeleton-rtl","title":"RTL","source":"import Skeleton from \"@marko-ui/shadcn/ui/skeleton/skeleton.marko\";\n\n<div dir=\"rtl\" class=\"flex items-center gap-4\">\n  <Skeleton class=\"h-12 w-12 rounded-full\"/>\n  <div class=\"space-y-2\">\n    <Skeleton class=\"h-4 w-[250px]\"/>\n    <Skeleton class=\"h-4 w-[200px]\"/>\n  </div>\n</div>","description":"Skeleton markup mirrors correctly under `dir=\"rtl\"`."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"div"}