---
title: Skeleton
description: 'A placeholder component for loading states, with customizable dimensions.'
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/components/primitives/skeleton'
  md: 'https://shopify.dev/docs/api/shop-minis/components/primitives/skeleton.md'
---

# Skeleton

A placeholder component for loading states, with customizable dimensions. Accepts standard HTML div props including `className` for sizing.

Examples

## Preview

![skeleton](https://shopify.dev/assets/assets/images/templated-apis-screenshots/shop-minis/Skeleton-DgxxHNX5.png)

### Examples

* ####

  ##### tsx

  ```tsx
  import React from 'react'

  import {Skeleton} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <div className="space-y-3">
        <Skeleton className="h-12 w-full" />
        <Skeleton className="h-4 w-3/4" />
        <Skeleton className="h-4 w-1/2" />
      </div>
    )
  }
  ```

***