Containers

Skeleton

A quiet placeholder while a page loads, so the layout shows at once and the content fills in where it will be.

Preview

Props

Guidelines

A quiet placeholder while a page loads, so the layout shows at once and the content fills in where it will be.

Provide: optional width and height (any CSS length; it fills the width and is 16px tall by default), shape (text for a line of text, circle for an avatar or a mark, a rounded block by default), or lines for a stack of text lines (the last one shorter).

• Draw the page's real shape: a header line, then the tiles, rows or cards that will come, at their real sizes. Keep it to the first screen.
• It pulses softly in opacity (1.4s), never a gradient sweep (gradients are only for the logo, bars and the backdrop). With reduced motion it holds still.
• Placeholders are hidden from screen readers; the page wraps them once in a role="status" with "Loading" for them.
• Use neutral-subtle on any surface, light and dark.