31:I[73290,["/_next/static/immutable/chunks/3x7h0ttewt9ia.js","/_next/static/immutable/chunks/2mass52kqdrjx.js","/_next/static/immutable/chunks/1sclmqj6-jrep.js","/_next/static/immutable/chunks/0ml4d8kwmv_e4.js","/_next/static/immutable/chunks/0qds_ctlsjubu.js","/_next/static/immutable/chunks/3kb9yd9awwslo.js","/_next/static/immutable/chunks/0sk0u4l0j2tq6.js","/_next/static/immutable/chunks/26fq_7nmdes-5.js","/_next/static/immutable/chunks/3ser92we4t697.js","/_next/static/immutable/chunks/3fmbhfa0k47ht.js","/_next/static/immutable/chunks/1o9os4mn41acw.js","/_next/static/immutable/chunks/44xbqrgtrh42-.js","/_next/static/immutable/chunks/2i9bc6r7-79_a.js","/_next/static/immutable/chunks/3tado710-lydy.js","/_next/static/immutable/chunks/0c62aiueyqqq1.js","/_next/static/immutable/chunks/2s6ksse228_m4.js","/_next/static/immutable/chunks/2oar49tq76lwt.js","/_next/static/immutable/chunks/120bdgvtae9kp.js","/_next/static/immutable/chunks/3_ygk_cd-8nhe.js","/_next/static/immutable/chunks/3gri9ga9ywfem.js","/_next/static/immutable/chunks/1on7f-39apld8.js","/_next/static/immutable/chunks/2fh68me-jw2rg.js","/_next/static/immutable/chunks/1yk268ooxs2u4.js","/_next/static/immutable/chunks/3tq_ql7br_1ds.js","/_next/static/immutable/chunks/0rr1ndeuzy3f_.js","/_next/static/immutable/chunks/1wmpv47j59ufq.js","/_next/static/immutable/chunks/21f8owwaykjkr.js","/_next/static/immutable/chunks/3ih6m30-zuzu5.js"],"CardFrame"] 32:I[73290,["/_next/static/immutable/chunks/3x7h0ttewt9ia.js","/_next/static/immutable/chunks/2mass52kqdrjx.js","/_next/static/immutable/chunks/1sclmqj6-jrep.js","/_next/static/immutable/chunks/0ml4d8kwmv_e4.js","/_next/static/immutable/chunks/0qds_ctlsjubu.js","/_next/static/immutable/chunks/3kb9yd9awwslo.js","/_next/static/immutable/chunks/0sk0u4l0j2tq6.js","/_next/static/immutable/chunks/26fq_7nmdes-5.js","/_next/static/immutable/chunks/3ser92we4t697.js","/_next/static/immutable/chunks/3fmbhfa0k47ht.js","/_next/static/immutable/chunks/1o9os4mn41acw.js","/_next/static/immutable/chunks/44xbqrgtrh42-.js","/_next/static/immutable/chunks/2i9bc6r7-79_a.js","/_next/static/immutable/chunks/3tado710-lydy.js","/_next/static/immutable/chunks/0c62aiueyqqq1.js","/_next/static/immutable/chunks/2s6ksse228_m4.js","/_next/static/immutable/chunks/2oar49tq76lwt.js","/_next/static/immutable/chunks/120bdgvtae9kp.js","/_next/static/immutable/chunks/3_ygk_cd-8nhe.js","/_next/static/immutable/chunks/3gri9ga9ywfem.js","/_next/static/immutable/chunks/1on7f-39apld8.js","/_next/static/immutable/chunks/2fh68me-jw2rg.js","/_next/static/immutable/chunks/1yk268ooxs2u4.js","/_next/static/immutable/chunks/3tq_ql7br_1ds.js","/_next/static/immutable/chunks/0rr1ndeuzy3f_.js","/_next/static/immutable/chunks/1wmpv47j59ufq.js","/_next/static/immutable/chunks/21f8owwaykjkr.js","/_next/static/immutable/chunks/3ih6m30-zuzu5.js"],"CardFrameHeader"] 33:I[73290,["/_next/static/immutable/chunks/3x7h0ttewt9ia.js","/_next/static/immutable/chunks/2mass52kqdrjx.js","/_next/static/immutable/chunks/1sclmqj6-jrep.js","/_next/static/immutable/chunks/0ml4d8kwmv_e4.js","/_next/static/immutable/chunks/0qds_ctlsjubu.js","/_next/static/immutable/chunks/3kb9yd9awwslo.js","/_next/static/immutable/chunks/0sk0u4l0j2tq6.js","/_next/static/immutable/chunks/26fq_7nmdes-5.js","/_next/static/immutable/chunks/3ser92we4t697.js","/_next/static/immutable/chunks/3fmbhfa0k47ht.js","/_next/static/immutable/chunks/1o9os4mn41acw.js","/_next/static/immutable/chunks/44xbqrgtrh42-.js","/_next/static/immutable/chunks/2i9bc6r7-79_a.js","/_next/static/immutable/chunks/3tado710-lydy.js","/_next/static/immutable/chunks/0c62aiueyqqq1.js","/_next/static/immutable/chunks/2s6ksse228_m4.js","/_next/static/immutable/chunks/2oar49tq76lwt.js","/_next/static/immutable/chunks/120bdgvtae9kp.js","/_next/static/immutable/chunks/3_ygk_cd-8nhe.js","/_next/static/immutable/chunks/3gri9ga9ywfem.js","/_next/static/immutable/chunks/1on7f-39apld8.js","/_next/static/immutable/chunks/2fh68me-jw2rg.js","/_next/static/immutable/chunks/1yk268ooxs2u4.js","/_next/static/immutable/chunks/3tq_ql7br_1ds.js","/_next/static/immutable/chunks/0rr1ndeuzy3f_.js","/_next/static/immutable/chunks/1wmpv47j59ufq.js","/_next/static/immutable/chunks/21f8owwaykjkr.js","/_next/static/immutable/chunks/3ih6m30-zuzu5.js"],"CardFrameTitle"] 34:I[37322,["/_next/static/immutable/chunks/3x7h0ttewt9ia.js","/_next/static/immutable/chunks/2mass52kqdrjx.js","/_next/static/immutable/chunks/1sclmqj6-jrep.js","/_next/static/immutable/chunks/0ml4d8kwmv_e4.js","/_next/static/immutable/chunks/0qds_ctlsjubu.js","/_next/static/immutable/chunks/3kb9yd9awwslo.js","/_next/static/immutable/chunks/0sk0u4l0j2tq6.js","/_next/static/immutable/chunks/26fq_7nmdes-5.js","/_next/static/immutable/chunks/3ser92we4t697.js","/_next/static/immutable/chunks/3fmbhfa0k47ht.js","/_next/static/immutable/chunks/1o9os4mn41acw.js","/_next/static/immutable/chunks/44xbqrgtrh42-.js","/_next/static/immutable/chunks/2i9bc6r7-79_a.js","/_next/static/immutable/chunks/3tado710-lydy.js","/_next/static/immutable/chunks/0c62aiueyqqq1.js","/_next/static/immutable/chunks/2s6ksse228_m4.js","/_next/static/immutable/chunks/2oar49tq76lwt.js","/_next/static/immutable/chunks/120bdgvtae9kp.js","/_next/static/immutable/chunks/3_ygk_cd-8nhe.js","/_next/static/immutable/chunks/3gri9ga9ywfem.js","/_next/static/immutable/chunks/1on7f-39apld8.js","/_next/static/immutable/chunks/2fh68me-jw2rg.js","/_next/static/immutable/chunks/1yk268ooxs2u4.js","/_next/static/immutable/chunks/3tq_ql7br_1ds.js","/_next/static/immutable/chunks/0rr1ndeuzy3f_.js","/_next/static/immutable/chunks/1wmpv47j59ufq.js","/_next/static/immutable/chunks/21f8owwaykjkr.js","/_next/static/immutable/chunks/3ih6m30-zuzu5.js"],"DocsActions"] 35:I[73290,["/_next/static/immutable/chunks/3x7h0ttewt9ia.js","/_next/static/immutable/chunks/2mass52kqdrjx.js","/_next/static/immutable/chunks/1sclmqj6-jrep.js","/_next/static/immutable/chunks/0ml4d8kwmv_e4.js","/_next/static/immutable/chunks/0qds_ctlsjubu.js","/_next/static/immutable/chunks/3kb9yd9awwslo.js","/_next/static/immutable/chunks/0sk0u4l0j2tq6.js","/_next/static/immutable/chunks/26fq_7nmdes-5.js","/_next/static/immutable/chunks/3ser92we4t697.js","/_next/static/immutable/chunks/3fmbhfa0k47ht.js","/_next/static/immutable/chunks/1o9os4mn41acw.js","/_next/static/immutable/chunks/44xbqrgtrh42-.js","/_next/static/immutable/chunks/2i9bc6r7-79_a.js","/_next/static/immutable/chunks/3tado710-lydy.js","/_next/static/immutable/chunks/0c62aiueyqqq1.js","/_next/static/immutable/chunks/2s6ksse228_m4.js","/_next/static/immutable/chunks/2oar49tq76lwt.js","/_next/static/immutable/chunks/120bdgvtae9kp.js","/_next/static/immutable/chunks/3_ygk_cd-8nhe.js","/_next/static/immutable/chunks/3gri9ga9ywfem.js","/_next/static/immutable/chunks/1on7f-39apld8.js","/_next/static/immutable/chunks/2fh68me-jw2rg.js","/_next/static/immutable/chunks/1yk268ooxs2u4.js","/_next/static/immutable/chunks/3tq_ql7br_1ds.js","/_next/static/immutable/chunks/0rr1ndeuzy3f_.js","/_next/static/immutable/chunks/1wmpv47j59ufq.js","/_next/static/immutable/chunks/21f8owwaykjkr.js","/_next/static/immutable/chunks/3ih6m30-zuzu5.js"],"CardFrameDescription"] 36:I[73290,["/_next/static/immutable/chunks/3x7h0ttewt9ia.js","/_next/static/immutable/chunks/2mass52kqdrjx.js","/_next/static/immutable/chunks/1sclmqj6-jrep.js","/_next/static/immutable/chunks/0ml4d8kwmv_e4.js","/_next/static/immutable/chunks/0qds_ctlsjubu.js","/_next/static/immutable/chunks/3kb9yd9awwslo.js","/_next/static/immutable/chunks/0sk0u4l0j2tq6.js","/_next/static/immutable/chunks/26fq_7nmdes-5.js","/_next/static/immutable/chunks/3ser92we4t697.js","/_next/static/immutable/chunks/3fmbhfa0k47ht.js","/_next/static/immutable/chunks/1o9os4mn41acw.js","/_next/static/immutable/chunks/44xbqrgtrh42-.js","/_next/static/immutable/chunks/2i9bc6r7-79_a.js","/_next/static/immutable/chunks/3tado710-lydy.js","/_next/static/immutable/chunks/0c62aiueyqqq1.js","/_next/static/immutable/chunks/2s6ksse228_m4.js","/_next/static/immutable/chunks/2oar49tq76lwt.js","/_next/static/immutable/chunks/120bdgvtae9kp.js","/_next/static/immutable/chunks/3_ygk_cd-8nhe.js","/_next/static/immutable/chunks/3gri9ga9ywfem.js","/_next/static/immutable/chunks/1on7f-39apld8.js","/_next/static/immutable/chunks/2fh68me-jw2rg.js","/_next/static/immutable/chunks/1yk268ooxs2u4.js","/_next/static/immutable/chunks/3tq_ql7br_1ds.js","/_next/static/immutable/chunks/0rr1ndeuzy3f_.js","/_next/static/immutable/chunks/1wmpv47j59ufq.js","/_next/static/immutable/chunks/21f8owwaykjkr.js","/_next/static/immutable/chunks/3ih6m30-zuzu5.js"],"Card"] 37:I[27638,["/_next/static/immutable/chunks/3x7h0ttewt9ia.js","/_next/static/immutable/chunks/2mass52kqdrjx.js","/_next/static/immutable/chunks/1sclmqj6-jrep.js","/_next/static/immutable/chunks/0ml4d8kwmv_e4.js","/_next/static/immutable/chunks/0qds_ctlsjubu.js","/_next/static/immutable/chunks/3kb9yd9awwslo.js","/_next/static/immutable/chunks/0sk0u4l0j2tq6.js","/_next/static/immutable/chunks/26fq_7nmdes-5.js","/_next/static/immutable/chunks/3ser92we4t697.js","/_next/static/immutable/chunks/3fmbhfa0k47ht.js","/_next/static/immutable/chunks/1o9os4mn41acw.js","/_next/static/immutable/chunks/44xbqrgtrh42-.js","/_next/static/immutable/chunks/2i9bc6r7-79_a.js","/_next/static/immutable/chunks/3tado710-lydy.js","/_next/static/immutable/chunks/0c62aiueyqqq1.js","/_next/static/immutable/chunks/2s6ksse228_m4.js","/_next/static/immutable/chunks/2oar49tq76lwt.js","/_next/static/immutable/chunks/120bdgvtae9kp.js","/_next/static/immutable/chunks/3_ygk_cd-8nhe.js","/_next/static/immutable/chunks/3gri9ga9ywfem.js","/_next/static/immutable/chunks/1on7f-39apld8.js","/_next/static/immutable/chunks/2fh68me-jw2rg.js","/_next/static/immutable/chunks/1yk268ooxs2u4.js","/_next/static/immutable/chunks/3tq_ql7br_1ds.js","/_next/static/immutable/chunks/0rr1ndeuzy3f_.js","/_next/static/immutable/chunks/1wmpv47j59ufq.js","/_next/static/immutable/chunks/21f8owwaykjkr.js","/_next/static/immutable/chunks/3ih6m30-zuzu5.js"],"ScrollArea"] 38:I[73290,["/_next/static/immutable/chunks/3x7h0ttewt9ia.js","/_next/static/immutable/chunks/2mass52kqdrjx.js","/_next/static/immutable/chunks/1sclmqj6-jrep.js","/_next/static/immutable/chunks/0ml4d8kwmv_e4.js","/_next/static/immutable/chunks/0qds_ctlsjubu.js","/_next/static/immutable/chunks/3kb9yd9awwslo.js","/_next/static/immutable/chunks/0sk0u4l0j2tq6.js","/_next/static/immutable/chunks/26fq_7nmdes-5.js","/_next/static/immutable/chunks/3ser92we4t697.js","/_next/static/immutable/chunks/3fmbhfa0k47ht.js","/_next/static/immutable/chunks/1o9os4mn41acw.js","/_next/static/immutable/chunks/44xbqrgtrh42-.js","/_next/static/immutable/chunks/2i9bc6r7-79_a.js","/_next/static/immutable/chunks/3tado710-lydy.js","/_next/static/immutable/chunks/0c62aiueyqqq1.js","/_next/static/immutable/chunks/2s6ksse228_m4.js","/_next/static/immutable/chunks/2oar49tq76lwt.js","/_next/static/immutable/chunks/120bdgvtae9kp.js","/_next/static/immutable/chunks/3_ygk_cd-8nhe.js","/_next/static/immutable/chunks/3gri9ga9ywfem.js","/_next/static/immutable/chunks/1on7f-39apld8.js","/_next/static/immutable/chunks/2fh68me-jw2rg.js","/_next/static/immutable/chunks/1yk268ooxs2u4.js","/_next/static/immutable/chunks/3tq_ql7br_1ds.js","/_next/static/immutable/chunks/0rr1ndeuzy3f_.js","/_next/static/immutable/chunks/1wmpv47j59ufq.js","/_next/static/immutable/chunks/21f8owwaykjkr.js","/_next/static/immutable/chunks/3ih6m30-zuzu5.js"],"CardPanel"] 39:I[73290,["/_next/static/immutable/chunks/3x7h0ttewt9ia.js","/_next/static/immutable/chunks/2mass52kqdrjx.js","/_next/static/immutable/chunks/1sclmqj6-jrep.js","/_next/static/immutable/chunks/0ml4d8kwmv_e4.js","/_next/static/immutable/chunks/0qds_ctlsjubu.js","/_next/static/immutable/chunks/3kb9yd9awwslo.js","/_next/static/immutable/chunks/0sk0u4l0j2tq6.js","/_next/static/immutable/chunks/26fq_7nmdes-5.js","/_next/static/immutable/chunks/3ser92we4t697.js","/_next/static/immutable/chunks/3fmbhfa0k47ht.js","/_next/static/immutable/chunks/1o9os4mn41acw.js","/_next/static/immutable/chunks/44xbqrgtrh42-.js","/_next/static/immutable/chunks/2i9bc6r7-79_a.js","/_next/static/immutable/chunks/3tado710-lydy.js","/_next/static/immutable/chunks/0c62aiueyqqq1.js","/_next/static/immutable/chunks/2s6ksse228_m4.js","/_next/static/immutable/chunks/2oar49tq76lwt.js","/_next/static/immutable/chunks/120bdgvtae9kp.js","/_next/static/immutable/chunks/3_ygk_cd-8nhe.js","/_next/static/immutable/chunks/3gri9ga9ywfem.js","/_next/static/immutable/chunks/1on7f-39apld8.js","/_next/static/immutable/chunks/2fh68me-jw2rg.js","/_next/static/immutable/chunks/1yk268ooxs2u4.js","/_next/static/immutable/chunks/3tq_ql7br_1ds.js","/_next/static/immutable/chunks/0rr1ndeuzy3f_.js","/_next/static/immutable/chunks/1wmpv47j59ufq.js","/_next/static/immutable/chunks/21f8owwaykjkr.js","/_next/static/immutable/chunks/3ih6m30-zuzu5.js"],"CardTitle"] 3a:I[64375,["/_next/static/immutable/chunks/3x7h0ttewt9ia.js","/_next/static/immutable/chunks/2mass52kqdrjx.js","/_next/static/immutable/chunks/1sclmqj6-jrep.js","/_next/static/immutable/chunks/0ml4d8kwmv_e4.js","/_next/static/immutable/chunks/0qds_ctlsjubu.js","/_next/static/immutable/chunks/3kb9yd9awwslo.js","/_next/static/immutable/chunks/0sk0u4l0j2tq6.js","/_next/static/immutable/chunks/26fq_7nmdes-5.js","/_next/static/immutable/chunks/3ser92we4t697.js","/_next/static/immutable/chunks/3fmbhfa0k47ht.js","/_next/static/immutable/chunks/1o9os4mn41acw.js","/_next/static/immutable/chunks/44xbqrgtrh42-.js","/_next/static/immutable/chunks/2i9bc6r7-79_a.js","/_next/static/immutable/chunks/3tado710-lydy.js","/_next/static/immutable/chunks/0c62aiueyqqq1.js","/_next/static/immutable/chunks/2s6ksse228_m4.js","/_next/static/immutable/chunks/2oar49tq76lwt.js","/_next/static/immutable/chunks/120bdgvtae9kp.js","/_next/static/immutable/chunks/3_ygk_cd-8nhe.js","/_next/static/immutable/chunks/3gri9ga9ywfem.js","/_next/static/immutable/chunks/1on7f-39apld8.js","/_next/static/immutable/chunks/2fh68me-jw2rg.js","/_next/static/immutable/chunks/1yk268ooxs2u4.js","/_next/static/immutable/chunks/3tq_ql7br_1ds.js","/_next/static/immutable/chunks/0rr1ndeuzy3f_.js","/_next/static/immutable/chunks/1wmpv47j59ufq.js","/_next/static/immutable/chunks/21f8owwaykjkr.js","/_next/static/immutable/chunks/3ih6m30-zuzu5.js"],"ComponentPreview",1] 3b:Tae1,"use client"; import { useEffect, useState } from "react"; import { UserAdd as UserRoundPlusIcon, UserGroup as UsersRoundIcon, } from "xiod-icons"; import { Avatar, AvatarFallback, AvatarImage } from "xiod-ui/avatar"; import { Button } from "xiod-ui/button"; import { Skeleton } from "xiod-ui/skeleton"; const users = [ { delay: 3000, fallback: "SJ", followers: "15k", image: "/placeholder.svg", name: "Sarah Johnson", role: "Design Engineer", }, { delay: 4000, fallback: "MA", followers: "8k", image: "/placeholder.svg", name: "Mark Bennett Andersson", role: "Product Designer", }, { delay: 3400, fallback: "AR", followers: "12k", image: "/placeholder.svg", name: "Alex Rivera", role: "UI/UX Designer", }, ]; function UserCard({ delay, user }: { delay: number; user: (typeof users)[0] }) { const [isLoaded, setIsLoaded] = useState(false); useEffect(() => { const timer = setTimeout(() => { setIsLoaded(true); }, delay); return () => clearTimeout(timer); }, [delay]); if (!isLoaded) { return ; } return ( <> {user.fallback}

{user.name}

{user.role}

{user.followers} followers

); } function UserCardSkeleton() { return ( <>

); } export default function SkeletonExample() { return (

{users.map((user) => (

))}

); } 21:["$","$L31",null,{"className":"after:inset-[-5px] after:-z-1 w-full h-full flex-1 after:pointer-events-none after:absolute after:rounded-[calc(var(--radius-xl)+4px)] after:border after:border-border/64","children":[["$","$L32",null,{"className":"static grid grid-rows-[auto_1fr] px-4 py-2 pt-0 z-10","children":["$","div",null,{"className":"flex mt-2 flex-col items-start justify-between w-full","children":[["$","div",null,{"className":"flex flex-col md:flex-row space-y-1 md:space-y-0 md:space-x-5 justify-between items-center w-full","children":[["$","$L33",null,{"className":"font-heading text-3xl font-bold tracking-tight","render":["$","h1",null,{"children":"Skeleton"}]}],["$","$L34",null,{"name":"Skeleton","description":"Use to show a placeholder while content is loading.","slug":"skeleton"}]]}],["$","div",null,{"children":["$","$L35",null,{"className":"text-lg text-muted-foreground","render":["$","p",null,{}],"children":"Use to show a placeholder while content is loading."}]}]]}]}],["$","$L36",null,{"className":"pointer-events-none h-full flex-1 flex-col flex-wrap overflow-y-auto bg-[color-mix(in_srgb,var(--color-card),var(--color-sidebar))] dark:bg-background","children":["$","$L37",null,{"children":["$","$L38",null,{"className":"flex flex-col gap-12 flex-1 p-4 lg:px-6 pointer-events-auto","children":[["$","div",null,{"className":"space-y-4","children":[["$","$L39",null,{"className":"text-xl","render":["$","h2",null,{"id":"preview"}],"children":"Preview"}],["$","$L3a",null,{"name":"skeleton","code":"$3b","children":"$L3c"}]]}],"$L3d","$L3e","$L3f","$L40"]}]}]}]]}]

Loading...

Preview Skeleton

Installation Skeleton

Usage Skeleton

API Reference Skeleton

Skeleton

Preview

Installation

Usage

Imports

Anatomy

API Reference