---
title: Skeleton
description: 'A placeholder component for loading states, with customizable dimensions.'
api_name: shop-minis
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.

Examples

## Preview

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

### Examples

* #### Skeleton

  ##### Default

  ```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>
    )
  }
  ```