a7:I[909850,["/_next/static/chunks/3-oldppc3cdn0.js","/_next/static/chunks/07ksm9-2ekd62.js","/_next/static/chunks/2g7jfqd9--bun.js","/_next/static/chunks/31kgouwxgdz30.js","/_next/static/chunks/0g_a--dgm_vx2.js","/_next/static/chunks/0wj_p_e20bygd.js","/_next/static/chunks/305fbm9-2kylm.js","/_next/static/chunks/35ku5yjbif25o.js","/_next/static/chunks/03gf-5_c1fhpw.js","/_next/static/chunks/0yra0wnwx6l3y.js","/_next/static/chunks/3mtcx1om0ufpk.js","/_next/static/chunks/0k7q93e3jov37.js","/_next/static/chunks/408vo-7izisls.js","/_next/static/chunks/1ra6b9l59hs1t.js","/_next/static/chunks/2lwbc7vr4n8gq.js","/_next/static/chunks/0vp4x8w8o2hc0.js","/_next/static/chunks/3cr3crpounju2.js","/_next/static/chunks/1td2r-9vo6pv5.js","/_next/static/chunks/20nvv431kujy3.js","/_next/static/chunks/0qe44_nk5f1zl.js","/_next/static/chunks/3nek2irthlc56.js","/_next/static/chunks/1f728deqjx2kz.js","/_next/static/chunks/18ajxbukqmopy.js","/_next/static/chunks/14mx-7p2q8y0b.js","/_next/static/chunks/20j41d7wd_sgo.js","/_next/static/chunks/23r04i55wnixy.js","/_next/static/chunks/2l8-oz74fa5ys.js","/_next/static/chunks/1af31cvxear8z.js","/_next/static/chunks/2eh1ne0xb6kel.js","/_next/static/chunks/1ms3so6ygrwar.js","/_next/static/chunks/42f3hommd-f3y.js","/_next/static/chunks/03s3pyenxnlya.js","/_next/static/chunks/1ihpugza2t6wp.js","/_next/static/chunks/2wlts9-d0fa8u.js","/_next/static/chunks/3wi8euz-zkel1.js","/_next/static/chunks/2xq470ey5-_lv.js","/_next/static/chunks/15w0zamt-sx0w.js","/_next/static/chunks/061nrwy7lfrr-.js","/_next/static/chunks/3us0tz8jgphgq.js","/_next/static/chunks/0pabg5jfcnriw.js","/_next/static/chunks/0bopwm34i7qq_.js","/_next/static/chunks/2ui0n41adci0h.js","/_next/static/chunks/07p56pwlf35-y.js","/_next/static/chunks/1vxnv67d7o8bj.js","/_next/static/chunks/0qnnlmu6qegbf.js","/_next/static/chunks/1rx6j5ec1e82z.js","/_next/static/chunks/07_9r9sz2g-x9.js","/_next/static/chunks/3_wfm093s4i0l.js","/_next/static/chunks/27m8-9kdgmv5-.js","/_next/static/chunks/2xd8zn4xsgv21.js","/_next/static/chunks/34-__-f_nugob.js","/_next/static/chunks/2dmx9eb8vn82s.js","/_next/static/chunks/2-znpd_m4tjmb.js","/_next/static/chunks/0i_kavar-12o-.js","/_next/static/chunks/39_vlg9zlrjtt.js","/_next/static/chunks/43g2v53fjy-xr.js","/_next/static/chunks/3lxsum0ik646y.js","/_next/static/chunks/226rudjv28qpw.js","/_next/static/chunks/1_78y4ocj8so4.js","/_next/static/chunks/2iovnmi2snpvb.js","/_next/static/chunks/3q95ud_qna442.js","/_next/static/chunks/3drn-i4ns1ejw.js","/_next/static/chunks/1twt84sc4-ltn.js","/_next/static/chunks/1ofk7fxn2ap85.js","/_next/static/chunks/273y382-ir8z9.js","/_next/static/chunks/40dmkeri0spkb.js","/_next/static/chunks/2gtvdrrwedb1r.js","/_next/static/chunks/12srbch7k-eze.js","/_next/static/chunks/1z73ew93q6a41.js","/_next/static/chunks/0wkdc4utnv_ti.js","/_next/static/chunks/2ibgtc36h_5pa.js","/_next/static/chunks/3iz1h_39iuzrk.js","/_next/static/chunks/0g20qq0t0gp06.js","/_next/static/chunks/349v30kq-bc42.js","/_next/static/chunks/0jory6vqhsq7p.js","/_next/static/chunks/0yv6gsuojapf3.js","/_next/static/chunks/11b_g6-m7flig.js","/_next/static/chunks/2p6vpq4xewuxu.js","/_next/static/chunks/2peg5doc0hze9.js","/_next/static/chunks/20s1bpchvmdwd.js","/_next/static/chunks/2oo16dwv5pyxt.js","/_next/static/chunks/2-idflq01vgp3.js","/_next/static/chunks/1tf3jwzn01hji.js","/_next/static/chunks/09tuq-df7q4ee.js","/_next/static/chunks/38r70eu8b0onq.js","/_next/static/chunks/2ko58wmnij6u2.js","/_next/static/chunks/3nu5uoszutw74.js","/_next/static/chunks/2-jpc5jqda0jm.js","/_next/static/chunks/2r4lqwybybq1x.js","/_next/static/chunks/393wg5igw4_z0.js","/_next/static/chunks/14ommr7mug_kh.js","/_next/static/chunks/340emax6-2q3d.js","/_next/static/chunks/0mmlrphq7bx7o.js","/_next/static/chunks/1bhj4t4poi1cm.js","/_next/static/chunks/1ti8cx6_hl0hv.js","/_next/static/chunks/3uipf5q6w14eo.js","/_next/static/chunks/0oo0d1qoxv4t_.js","/_next/static/chunks/2f7drku6salwi.js","/_next/static/chunks/1twnjg80ckh77.js","/_next/static/chunks/0q2uz3_g8i4w9.js","/_next/static/chunks/0fsg19a662tv4.js"],"CodeCollapsibleWrapper"] 9b:T407,

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonDemo() {

70:["$","div",null,{"className":"relative","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","className":"[&>pre]:max-h-96","children":["$undefined",["$","$L8b",null,{"value":"import { Skeleton } from \"@/components/ui/skeleton\"\n\nexport function SkeletonDemo() {"}],["$","div",null,{"data-not-typeset":true,"dangerouslySetInnerHTML":{"__html":"$9b"}}]]}]}] 9c:Tfa5,

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonDemo() {
  return (
    <div className="flex items-center gap-4">
      <Skeleton className="h-12 w-12 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[250px]" />
        <Skeleton className="h-4 w-[200px]" />
      </div>
    </div>
  )
}

6f:["$","div",null,{"className":"relative","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","className":"[&>pre]:max-h-96","children":["$undefined",["$","$L8b",null,{"value":"import { Skeleton } from \"@/components/ui/skeleton\"\n\nexport function SkeletonDemo() {\n return (\n

\n \n

\n \n \n

\n )\n}\n"}],["$","div",null,{"data-not-typeset":true,"dangerouslySetInnerHTML":{"__html":"$9c"}}]]}]}] 9d:Tfb5,

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonAvatar() {
  return (
    <div className="flex w-fit items-center gap-4">
      <Skeleton className="size-10 shrink-0 rounded-full" />
      <div className="grid gap-2">
        <Skeleton className="h-4 w-[150px]" />
        <Skeleton className="h-4 w-[100px]" />
      </div>
    </div>
  )
}

8d:["$","div",null,{"className":"relative","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","className":"[&>pre]:max-h-96","children":["$undefined",["$","$L8b",null,{"value":"import { Skeleton } from \"@/components/ui/skeleton\"\n\nexport function SkeletonAvatar() {\n return (\n

\n \n

\n \n \n

\n )\n}\n"}],["$","div",null,{"data-not-typeset":true,"dangerouslySetInnerHTML":{"__html":"$9d"}}]]}]}] 9e:T409,

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonAvatar() {

8e:["$","div",null,{"className":"relative","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","className":"[&>pre]:max-h-96","children":["$undefined",["$","$L8b",null,{"value":"import { Skeleton } from \"@/components/ui/skeleton\"\n\nexport function SkeletonAvatar() {"}],["$","div",null,{"data-not-typeset":true,"dangerouslySetInnerHTML":{"__html":"$9e"}}]]}]}] 9f:T1203,

import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonCard() {
  return (
    <Card className="w-full max-w-xs">
      <CardHeader>
        <Skeleton className="h-4 w-2/3" />
        <Skeleton className="h-4 w-1/2" />
      </CardHeader>
      <CardContent>
        <Skeleton className="aspect-video w-full" />
      </CardContent>
    </Card>
  )
}

90:["$","div",null,{"className":"relative","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","className":"[&>pre]:max-h-96","children":["$undefined",["$","$L8b",null,{"value":"import { Card, CardContent, CardHeader } from \"@/components/ui/card\"\nimport { Skeleton } from \"@/components/ui/skeleton\"\n\nexport function SkeletonCard() {\n return (\n \n \n \n \n \n \n \n \n \n )\n}\n"}],["$","div",null,{"data-not-typeset":true,"dangerouslySetInnerHTML":{"__html":"$9f"}}]]}]}] a0:T42b,

import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

91:["$","div",null,{"className":"relative","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","className":"[&>pre]:max-h-96","children":["$undefined",["$","$L8b",null,{"value":"import { Card, CardContent, CardHeader } from \"@/components/ui/card\"\nimport { Skeleton } from \"@/components/ui/skeleton\"\n"}],["$","div",null,{"data-not-typeset":true,"dangerouslySetInnerHTML":{"__html":"$a0"}}]]}]}] a1:Td1b,

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonText() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-2">
      <Skeleton className="h-4 w-full" />
      <Skeleton className="h-4 w-full" />
      <Skeleton className="h-4 w-3/4" />
    </div>
  )
}

93:["$","div",null,{"className":"relative","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","className":"[&>pre]:max-h-96","children":["$undefined",["$","$L8b",null,{"value":"import { Skeleton } from \"@/components/ui/skeleton\"\n\nexport function SkeletonText() {\n return (\n

\n \n \n \n

\n )\n}\n"}],["$","div",null,{"data-not-typeset":true,"dangerouslySetInnerHTML":{"__html":"$a1"}}]]}]}] a2:T407,

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonForm() {

97:["$","div",null,{"className":"relative","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","className":"[&>pre]:max-h-96","children":["$undefined",["$","$L8b",null,{"value":"import { Skeleton } from \"@/components/ui/skeleton\"\n\nexport function SkeletonForm() {"}],["$","div",null,{"data-not-typeset":true,"dangerouslySetInnerHTML":{"__html":"$a2"}}]]}]}] a3:T157c,

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonForm() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-7">
      <div className="flex flex-col gap-3">
        <Skeleton className="h-4 w-20" />
        <Skeleton className="h-8 w-full" />
      </div>
      <div className="flex flex-col gap-3">
        <Skeleton className="h-4 w-24" />
        <Skeleton className="h-8 w-full" />
      </div>
      <Skeleton className="h-8 w-24" />
    </div>
  )
}

96:["$","div",null,{"className":"relative","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","className":"[&>pre]:max-h-96","children":["$undefined",["$","$L8b",null,{"value":"import { Skeleton } from \"@/components/ui/skeleton\"\n\nexport function SkeletonForm() {\n return (\n

\n \n \n

\n \n

\n )\n}\n"}],["$","div",null,{"data-not-typeset":true,"dangerouslySetInnerHTML":{"__html":"$a3"}}]]}]}] a4:T407,

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonText() {

94:["$","div",null,{"className":"relative","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","className":"[&>pre]:max-h-96","children":["$undefined",["$","$L8b",null,{"value":"import { Skeleton } from \"@/components/ui/skeleton\"\n\nexport function SkeletonText() {"}],["$","div",null,{"data-not-typeset":true,"dangerouslySetInnerHTML":{"__html":"$a4"}}]]}]}] a5:T408,

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonTable() {

9a:["$","div",null,{"className":"relative","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","className":"[&>pre]:max-h-96","children":["$undefined",["$","$L8b",null,{"value":"import { Skeleton } from \"@/components/ui/skeleton\"\n\nexport function SkeletonTable() {"}],["$","div",null,{"data-not-typeset":true,"dangerouslySetInnerHTML":{"__html":"$a5"}}]]}]}] a6:T13c2,

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonTable() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      {Array.from({ length: 5 }).map((_, index) => (
        <div className="flex gap-4" key={index}>
          <Skeleton className="h-4 flex-1" />
          <Skeleton className="h-4 w-24" />
          <Skeleton className="h-4 w-20" />
        </div>
      ))}
    </div>
  )
}

99:["$","div",null,{"className":"relative","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","className":"[&>pre]:max-h-96","children":["$undefined",["$","$L8b",null,{"value":"import { Skeleton } from \"@/components/ui/skeleton\"\n\nexport function SkeletonTable() {\n return (\n

\n {Array.from({ length: 5 }).map((_, index) => (\n

\n \n \n \n

\n ))}\n

\n )\n}\n"}],["$","div",null,{"data-not-typeset":true,"dangerouslySetInnerHTML":{"__html":"$a6"}}]]}]}] a8:T49c,M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375za9:Tdab,

import { cn } from "cn"

function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="skeleton"
      className={cn("animate-pulse rounded-md bg-hover", className)}
      {...props}
    />
  )
}

export { Skeleton }

8a:["$","$La7",null,{"className":"$undefined","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","className":"[&>pre]:max-h-96","children":[["$","figcaption",null,{"data-rehype-pretty-code-title":"","className":"flex items-center gap-2 text-code-foreground [&_svg]:size-4 [&_svg]:text-code-foreground [&_svg]:opacity-70","data-language":"tsx","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 24 24","className":"fill-foreground","children":["$","path",null,{"d":"$a8"}]}],"components/ui/skeleton.tsx"]}],["$","$L8b",null,{"value":"import { cn } from \"cn\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nexport { Skeleton }\n"}],["$","div",null,{"data-not-typeset":true,"dangerouslySetInnerHTML":{"__html":"$a9"}}]]}]}]

Search documentation

Installation#

Usage#

Avatar#

Card#

Text#

Form#

Table#

Installation

Usage

Avatar

Card

Text

Form

Table