---
status: beta
title: Skeleton
desc: A faux UI to indicate the loading state of a component or UI Block.
ico: mdi:drive-document
keywords:
  - loader
  - loading
  - placeholder

props:
  - class: .prs-skeleton
    type: component
    desc: For container
  - class: --skel-width
    type: token
    desc: Width
  - class: --skel-height
    type: token
    desc: Height
  - class: --skel-radius
    type: token
    desc: Corner/border radius
  - class: --skel-bg
    type: token
    desc: Background color (converted to 90% transparent)
  - class: --skel-fg
    type: token
    desc: Gradient base color (converted to 30% transparent)

controls:
  - name: width
    type: range
    min: 0
    max: 10
    step: 1
    label: Width
    desc: Size in rems. 1rem = 16px. We use rems so that if we change the base font size other elements size appropriately. <strong>Set to 0 for 100% width.</strong>
    default: 3
  - name: height
    type: range
    min: 0
    max: 10
    step: 1
    label: Height
    desc: Size in rems. 1rem = 16px. We use rems so that if we change the base font size other elements size appropriately. <strong>Set to 0 for a default height of 1rem.</strong>
    default: 3
  - name: radius
    type: range
    min: 0
    max: 80
    step: 1
    label: Corner radius
    desc: Size in pixels. Border radius has some oddities so the only uniform way to control it is with pixels. :(
    default: 10
  - name: background
    type: text
    label: Background color
    desc: Any color you choose here will be set to 90% opacity. The default value is the nearest parent color style (currentColor).
    default: var(--prs-c-gray-950)
  - name: foreground
    type: text
    label: Foreground
    desc: Gradient fade base color. Any color you choose here will be set to 30% opacity. The default value is Prose white.
    default: var(--prs-c-white)
  - name: real
    type: toggle
    label: Real example
    desc: A real-world example. <strong>Ignores the previous controls.</strong>
    default: false

previewHeight: 12
preview: |
  <div x-show="!real" class="p-4 w-screen max-w-xl flex items-center justify-center">
    <div class="prs-skeleton" :style="{
      '--skel-width': (width === 0) ? '100%' : (width +'rem'),
      '--skel-height': (height === 0) ? '1rem' : (height +'rem'),
      '--skel-radius': radius +'px',
      '--skel-bg': background.length ? background : 'currentColor',
      '--skel-fg': foreground,
    }"></div>
  </div>
  <div x-show="real" class="p-4 w-screen max-w-xs bg-white flex items-center gap-2 rounded-box">
    <div class="shrink-0">
      <div class="prs-skeleton" style="--skel-width: 3rem; --skel-height: 3rem; --skel-radius: 9999px;"></div>
    </div>
    <div class="grow space-y-2">
      <div class="prs-skeleton" style="--skel-width: 75%;"></div>
      <div class="prs-skeleton"></div>
    </div>
  </div>

code:
  html: |
    {real}
  logic:
    real: "this.real ? '
        <div class=\"flex items-center gap-2\"> <!-- this example uses tailwindcss for layout -->
        \\n  <div class=\"shrink-0\">
        \\n    <div class=\"prs-skeleton\" style=\"--skel-width: 3rem; --skel-height: 3rem; --skel-radius: 9999px;\"></div>
        \\n  </div>
        \\n  <div class=\"grow space-y-2\">
        \\n    <div class=\"prs-skeleton\" style=\"--skel-width: 75%;\"></div>
        \\n    <div class=\"prs-skeleton\"></div>
        \\n  </div>
        \\n</div>' : '<div
        \\n  class=\"prs-skeleton\"
        \\n  style=\"{width}{height}
        \\n    --skel-radius: {radius}px;{bg}{fg}
        \\n  \"
      \\n></div>'"
    width: "this.width !== '0' ? ('\\n    --skel-width: '+ this.width +'rem;') : ''"
    height: "(this.height !== '0') ? ('\\n    --skel-height: '+ this.height +'rem;') : ''"
    radius: "this.radius"
    bg: "(this.background !== 'currentColor') ? ('\\n    --bg: '+ this.background +';') : ''"
    fg: "(this.foreground !== 'var(--prs-c-white)') ? ('\\n    --fg: '+ this.foreground +';') : ''"
---