Documentation Playground
Skip to content
Docs

Skeleton

Replaces content with same shape placeholder that indicates a loading state.
Loading 
<.skeleton>Loading</.skeleton>

API Reference

This component is based on the span element and supports common margin props.

Prop Type Default Description
class string nil Additional CSS classes to add to the element.
height string nil Explicit height for the skeleton (e.g., '20px', '2rem').
loading boolean true Whether to show skeleton placeholder or actual content.
m any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mb any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
ml any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mr any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mt any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mx any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
my any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
style string ""
width string nil Explicit width for the skeleton (e.g., '100px', '50%').
class Additional CSS classes to add to the element.
Type string Default nil
height Explicit height for the skeleton (e.g., '20px', '2rem').
Type string Default nil
loading Whether to show skeleton placeholder or actual content.
Type boolean Default true
m Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mb Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
ml Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mr Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mt Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mx Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
my Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
style
Type string Default ""
width Explicit width for the skeleton (e.g., '100px', '50%').
Type string Default nil

Examples

Size

Use the width and height props to manually control the size of the skeleton.

<.skeleton width="48px" height="48px" />

With children

Use the loading prop to control whether the skeleton or its children are displayed. Skeleton preserves the dimensions of children when they are hidden and disables interactive elements.

<.flex gap="4">
  <.skeleton loading={true}><.switch id="skeleton-switch-loading" default_checked /></.skeleton>
  <.skeleton loading={false}><.switch id="skeleton-switch-loaded" default_checked /></.skeleton>
</.flex>

With text

When using Skeleton with text, you'd usually wrap the text node itself rather than the parent element. This ensures that the text is replaced with a placeholder of the same size:

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet 
<.container size="1">
  <.flex direction="column" gap="2">
    <.text>
      <.skeleton>Lorem ipsum dolor sit amet.</.skeleton>
    </.text>
    <.skeleton>
      <.text>Lorem ipsum dolor sit amet</.text>
    </.skeleton>
  </.flex>
</.container>

The difference is especially noticeable when wrapping longer paragraphs:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis tellus, efficitur id convallis a, viverra eget libero. Nam magna erat, fringilla sed commodo sed, aliquet nec magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis tellus, efficitur id convallis a, viverra eget libero. Nam magna erat, fringilla sed commodo sed, aliquet nec magna. 
<.container size="1">
  <.flex direction="column" gap="3">
    <.text>
      <.skeleton>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis tellus, efficitur id convallis a, viverra eget libero. Nam magna erat, fringilla sed commodo sed, aliquet nec magna.
      </.skeleton>
    </.text>
    <.skeleton>
      <.text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis tellus, efficitur id convallis a, viverra eget libero. Nam magna erat, fringilla sed commodo sed, aliquet nec magna.
      </.text>
    </.skeleton>
  </.flex>
</.container>
← Separator Slider →