Skeleton

Skeleton components provide visual placeholders for text, avatars, and blocks to reduce perceived loading time.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽³⁾

Properties

⁽²⁴⁾

Playground

Basics

Stack text, avatar, and block placeholders to preview the structure of incoming content while data loads.

Loading demo…

import
 
{
 
Block
,
 
Row
,
 
Skeleton
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
>
      
<Skeleton
 
shape
=
"text"
 
w
=
"60%"
 
/>
      
<Skeleton
 
shape
=
"text"
 
w
=
"80%"
 
/>
      
<Skeleton
 
shape
=
"text"
 
w
=
"40%"
 
/>
      
<Row
 
gap
=
"md"
 
align
=
"center"
>
        
<Skeleton
 
shape
=
"avatar"
 
size
=
"lg"
 
/>
        
<Block
 
grow
=
{
1
}
>
          
<Skeleton
 
shape
=
"text"
 
w
=
"40%"
 
/>
          
<Skeleton
 
shape
=
"text"
 
w
=
"60%"
 
/>
        
</Block
>
      
</Row
>
      
<Skeleton
 
shape
=
"rectangle"
 
h
=
{
120
}
 
/>
      
<Skeleton
 
shape
=
"button"
 
w
=
{
120
}
 
/>
    
</Block
>
  
)
;
}

Shapes

Preview the available skeleton shapes for avatars, typography lines, actions, and media blocks.

Loading demo…

import
 
{
 
Block
,
 
Row
,
 
Skeleton
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
>
      
<Row
 
gap
=
"lg"
 
align
=
"center"
 
wrap
=
"wrap"
>
        
<Skeleton
 
shape
=
"avatar"
 
size
=
"sm"
 
/>
        
<Skeleton
 
shape
=
"avatar"
 
size
=
"md"
 
/>
        
<Skeleton
 
shape
=
"avatar"
 
size
=
"lg"
 
/>
        
<Skeleton
 
shape
=
"avatar"
 
size
=
"xl"
 
/>
      
</Row
>
      
<Block
>
        
<Skeleton
 
shape
=
"text"
 
w
=
"100%"
 
/>
        
<Skeleton
 
shape
=
"text"
 
w
=
"90%"
 
/>
        
<Skeleton
 
shape
=
"text"
 
w
=
"70%"
 
/>
      
</Block
>
      
<Row
 
gap
=
"md"
 
wrap
=
"wrap"
>
        
<Skeleton
 
shape
=
"button"
 
w
=
{
80
}
 
/>
        
<Skeleton
 
shape
=
"button"
 
w
=
{
100
}
 
/>
        
<Skeleton
 
shape
=
"button"
 
w
=
{
120
}
 
/>
      
</Row
>
      
<Row
 
gap
=
"sm"
 
wrap
=
"wrap"
>
        
<Skeleton
 
shape
=
"chip"
 
/>
        
<Skeleton
 
shape
=
"chip"
 
/>
        
<Skeleton
 
shape
=
"chip"
 
/>
      
</Row
>
      
<Skeleton
 
shape
=
"rectangle"
 
h
=
{
60
}
 
/>
      
<Skeleton
 
shape
=
"card"
 
h
=
{
200
}
 
/>
    
</Block
>
  
)
;
}

Card Layout

Combine avatar, text, and action placeholders to preview a rich card layout ahead of remote content.

Loading demo…

import
 
{
 
Block
,
 
Row
,
 
Skeleton
,
 useTheme 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 theme 
=
 
useTheme
(
)
;
 
  
return
 
(
    
<Block
      
p
=
"lg"
      
radius
=
"lg"
      
borderWidth
=
{
1
}
      
borderColor
=
{
theme
.
backgrounds
.
border
}
      
bg
=
{
theme
.
backgrounds
.
surface
}
    
>
      
<Block
>
        
<Row
 
gap
=
"md"
 
align
=
"center"
>
          
<Skeleton
 
shape
=
"avatar"
 
size
=
"lg"
 
/>
          
<Block
 
grow
=
{
1
}
>
            
<Skeleton
 
shape
=
"text"
 
w
=
"32%"
 
/>
            
<Skeleton
 
shape
=
"text"
 
w
=
"48%"
 
/>
          
</Block
>
        
</Row
>
        
<Skeleton
 
shape
=
"rectangle"
 
h
=
{
120
}
 
/>
        
<Block
>
          
<Skeleton
 
shape
=
"text"
 
w
=
"100%"
 
/>
          
<Skeleton
 
shape
=
"text"
 
w
=
"78%"
 
/>
        
</Block
>
        
<Row
 
gap
=
"sm"
 
wrap
=
"wrap"
>
          
<Skeleton
 
shape
=
"chip"
 
/>
          
<Skeleton
 
shape
=
"chip"
 
/>
          
<Skeleton
 
shape
=
"chip"
 
/>
        
</Row
>
      
</Block
>
    
</Block
>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/Skeleton

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap