Skip to content
DOL Studio

Skeleton

Design: Stable Code: Coded feedbackloading 6 Figma sets 8 standalone Skeleton/Mass content

Live preview

Text rows

`shape=text` — variable-width rows simulating paragraph loading. Use staggered widths (75% / 100% / 60%) for natural rhythm.

Card with avatar

Composed shape — `shape=circle` (avatar placeholder) + `shape=text` (name + 2 metadata rows). Common comment / user-card loading state.

Thumbnail block

`shape=rect` — image / hero / chart placeholder. Set fixed height to reserve layout space before content arrives.

Import & files

Import
import { Skeleton } from "@dol/ui/skeleton";
Source file
packages/@dol/ui/src/skeleton/Skeleton.tsx

Figma source

Figma source 6 sets
Page
Skeleton
Sets
6 + 8 standalone
Primary set
Skeleton/Mass content · 9 variants Open in Figma →
Showing: Skeleton/Mass content
5 other sets
  • Skeleton comps/img 4 variants Figma →
  • Skeleton/Box 4 variants Figma →
  • Skeleton/Content addvance 7 variants Figma →
  • Skeleton/Table row 4 variants Figma →
  • Skeleton/tiny content 2 variants Figma →

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# Skeleton
Slug: `skeleton`
Domain: general · Category: feedback
Design: stable · Code: coded


## Description
Loading-state placeholder shapes - content-block, image, image-large variants. Prefer over spinner per CORE.md anti-patterns.


## Import
```ts
import { Skeleton } from "@dol/ui/skeleton";
```
Source: `packages/@dol/ui/src/skeleton/Skeleton.tsx`


## Figma source
Page: Skeleton
Sets: 6
Primary: Skeleton/Mass content
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=12964-141311

Related

  • Notice

    Alert

    Coded
  • No items
    Add your first entry.

    Empty state

    Coded
  • 60%

    Progress

    Coded
  • Saved
    Changes committed.

    Toast

    Coded
  • R
    bug-report

    Report

    Design only

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).