> ## Documentation Index
> Fetch the complete documentation index at: https://docs.equa.cc/llms.txt
> Use this file to discover all available pages before exploring further.

# EquaSkeleton

> Design system reference for EquaSkeleton, including Storybook, Figma, screenshots, and usage guidance

# EquaSkeleton

> **Last Verified:** 2026-05-20 | **Storybook source:** `equa-patternlib-nextjs/stories/EquaSkeleton.stories.tsx`, Line: 13

## Purpose

Loading placeholders for text, cards, avatars, and tables.

## Storybook

| Story            | Reference                                                                       |
| ---------------- | ------------------------------------------------------------------------------- |
| Default          | [Storybook](http://localhost:6006/?path=/story/equa-skeleton--default)          |
| Variants         | [Storybook](http://localhost:6006/?path=/story/equa-skeleton--variants)         |
| Animations       | [Storybook](http://localhost:6006/?path=/story/equa-skeleton--animations)       |
| Text Skeleton    | [Storybook](http://localhost:6006/?path=/story/equa-skeleton--text-skeleton)    |
| Avatar Skeleton  | [Storybook](http://localhost:6006/?path=/story/equa-skeleton--avatar-skeleton)  |
| Card Skeleton    | [Storybook](http://localhost:6006/?path=/story/equa-skeleton--card-skeleton)    |
| Table Skeleton   | [Storybook](http://localhost:6006/?path=/story/equa-skeleton--table-skeleton)   |
| List Skeleton    | [Storybook](http://localhost:6006/?path=/story/equa-skeleton--list-skeleton)    |
| Profile Skeleton | [Storybook](http://localhost:6006/?path=/story/equa-skeleton--profile-skeleton) |

## API And Props

| Prop or Control | Source            | Notes                                |
| --------------- | ----------------- | ------------------------------------ |
| `variant`       | Storybook control | See source story for accepted values |

Sources:

* `equa-patternlib-nextjs/src/components/skeleton/skeleton.tsx`, Line: 4
* `equa-patternlib-nextjs/src/components/skeleton/index.ts`
* `equa-patternlib-nextjs/stories/EquaSkeleton.stories.tsx`, Line: 13

## Figma

UNVERIFIED -- requires Figma node assignment

## Screenshots

| State           | Asset                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Equa dark theme | <img src="https://mintcdn.com/equainc/WF4vvyO1PBrsp7n_/images/design-system/components/equa-skeleton/equa-skeleton--default-equa.png?fit=max&auto=format&n=WF4vvyO1PBrsp7n_&q=85&s=ef3cc13b0b25e3c5bc2dffae50683799" alt="EquaSkeleton dark theme" width="1200" height="760" data-path="images/design-system/components/equa-skeleton/equa-skeleton--default-equa.png" />          |
| Light theme     | <img src="https://mintcdn.com/equainc/WF4vvyO1PBrsp7n_/images/design-system/components/equa-skeleton/equa-skeleton--default-light.png?fit=max&auto=format&n=WF4vvyO1PBrsp7n_&q=85&s=90784cc1fae4674aecbbac347d5455e1" alt="EquaSkeleton light theme" width="1200" height="760" data-path="images/design-system/components/equa-skeleton/equa-skeleton--default-light.png" /> |

## Usage Notes

* Prefer this component over local one-off UI for matching product states.
* Keep new variants represented in Storybook before adding docs references here.
* Use token-backed colors, spacing, radius, and shadows from [Foundations](/architecture/design-system/foundations).

## Accessibility Notes

* Preserve keyboard and focus behavior from the source component.
* Any icon-only controls must provide an accessible label in consuming product code.
* Validate color contrast in both Equa dark and light theme screenshots before release.