---
title: Skeleton overview
description: A collection of components that provide a skeleton/placeholders for different types of content. This can be used in feature cards and other components.
author: harimanok_
---

import Receipt from "@/animata/skeleton/receipt";
import List from "@/animata/skeleton/list";
import WideCard from "@/animata/skeleton/wide-card";
import CookieBanner from "@/animata/skeleton/cookie-banner";
import Code from "@/animata/skeleton/code";
import Report from "@/animata/skeleton/report";

<ComponentList>
  <ComponentListItem copyId="receipt">
    <Receipt />
    ```tsx file=<rootDir>/animata/skeleton/receipt.tsx copyId="receipt"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="list">
    <List />
    ```tsx file=<rootDir>/animata/skeleton/list.tsx copyId="list"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="wide-card">
    <WideCard />
    ```tsx file=<rootDir>/animata/skeleton/wide-card.tsx copyId="wide-card"

    ```

  </ComponentListItem>

  <ComponentListItem copyId="cookie-banner">
    <CookieBanner />
    ```tsx file=<rootDir>/animata/skeleton/cookie-banner.tsx copyId="cookie-banner"

    ```

  </ComponentListItem>

  <ComponentListItem copyId="code">
    <Code />
    ```tsx file=<rootDir>/animata/skeleton/code.tsx copyId="code"
      
    ```
  </ComponentListItem>

  <ComponentListItem copyId="report">
    <Report />
    ```tsx file=<rootDir>/animata/skeleton/report.tsx copyId="report"
      
    ```
  </ComponentListItem>
</ComponentList>

## Credits

Photo by [Salvatore Andrea Santacroce](https://unsplash.com/@salcrocejpg?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) on [Unsplash](https://unsplash.com/photos/a-purple-light-shines-in-the-middle-of-a-room-wGICoyAhEs4?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)
