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

# Skeleton

> Show themed placeholder shapes while content loads.

export const StoryEmbed = ({storyId, title, height = 240}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

`Skeleton` provides a placeholder shape with theme colors and a moving highlight. Compose shapes in the layout of the content being loaded. The application owns loading state and feature-specific layouts.

<StoryEmbed storyId="ui-feedback-skeleton--shapes" title="Skeleton shapes" />

## Usage

```tsx theme={null}
import { Skeleton, SKELETON_HEIGHT_SIZES } from 'twenty-ui/primitives/feedback';
import { Text } from 'twenty-ui/primitives/typography';

export const LoadingProfile = () => (
  <Text render={<div />} style={{ display: 'flex', gap: 16 }}>
    <Skeleton width={40} height={40} borderRadius="50%" />
    <Text render={<div />} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <Skeleton borderRadius={4} width={180} height={SKELETON_HEIGHT_SIZES.s} />
      <Skeleton borderRadius={4} width={120} height={SKELETON_HEIGHT_SIZES.xs} />
    </Text>
  </Text>
);
```

Numeric dimensions use pixels. CSS lengths such as percentages and `em` are also supported. Without dimensions, the placeholder fills the available width and uses the inherited font height. Use equal dimensions and `borderRadius="50%"` for a circle.

`SKELETON_HEIGHT_SIZES` provides shared heights for `xs` (13px), `s` (16px), `m` (24px), `l` (32px) and `xl` (40px). Keep layout-specific dimensions in the application.

Each `Skeleton` renders one placeholder. Keep repeated lines, text-line spacing and loading regions in application components that wrap the primitive.

## Motion and accessibility

Skeletons are decorative and have `aria-hidden="true"` by default. Keep loading announcements in a host-owned status region instead of announcing each shape. Skeleton does not accept children.

The highlight moves from left to right on a 1.5-second ease-in-out loop and is hidden when the user prefers reduced motion. Pass `animated={false}` for a static placeholder.

<StoryEmbed storyId="ui-feedback-skeleton--static" title="Static skeleton" />

## Composition and theme

Native props, `className`, `style` and `ref` target the placeholder span. Use `render` to compose another element. Explicit native styles override dimension and color props.

The base and highlight colors default to the theme tertiary background and lighter transparent background. Use `baseColor`, `highlightColor` and `borderRadius` to override them. The default radius is `0.25rem` and the corner shape follows the surrounding styles. No skeleton-specific provider or stylesheet import is needed after loading `twenty-ui/style.css` and the UI theme.

## Props

<ParamField body="animated" type="boolean" default="true">
  Animate the highlight by default. Reduced-motion preferences always disable animation.
</ParamField>

<ParamField body="aria-hidden" type="Booleanish">
  Placeholders are decorative and hidden from assistive technology by default. The host owns loading announcements.
</ParamField>

<ParamField body="baseColor" type="BackgroundColor">
  Placeholder background color. Defaults to the theme tertiary background.
</ParamField>

<ParamField body="borderRadius" type="BorderRadius<string | number>">
  Corner radius in pixels or a CSS length. Defaults to 0.25rem and inherits the surrounding corner shape.
</ParamField>

<ParamField body="className" type="string">
  CSS class merged with the placeholder class.
</ParamField>

<ParamField body="height" type="Height<string | number>">
  Placeholder height in pixels or a CSS length. Defaults to the inherited font height.
</ParamField>

<ParamField body="highlightColor" type="BackgroundColor">
  Animated highlight color. Defaults to the theme lighter transparent background.
</ParamField>

<ParamField body="ref" type="Ref<HTMLSpanElement>">
  Ref to the placeholder span, or the element supplied through render.
</ParamField>

<ParamField body="render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>">
  Element or render callback composed through Base UI useRender.
</ParamField>

<ParamField body="style" type="CSSProperties">
  Native styles merged with the placeholder dimensions and colors. Explicit styles win.
</ParamField>

<ParamField body="width" type="Width<string | number>">
  Placeholder width in pixels or a CSS length. Defaults to the available width.
</ParamField>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.