---
id: skeleton
scope: theming
---

The `Skeleton` component is a single part component. All of the styling is
applied directly to the `Skeleton` element.

> To learn more about styling single part components, visit the
> [Component Style](/docs/styled-system/component-style#styling-single-part-components)
> page.

## Theming properties

The properties that affect the theming of the `Skeleton` component are:

- `variant`: The visual variant of the skeleton.
- `colorScheme`: The color scheme of the skeleton.
- `size`: The size of the skeleton.

## Theming utilities

- `defineStyle`: a function used to create style objects.
- `defineStyleConfig`: a function used to define the style configuration for a
  single part component.

```jsx live=false
import { defineStyle, defineStyleConfig } from '@chakra-ui/react'
```

## Adding a custom variant

```jsx live=false
import { defineStyle, defineStyleConfig, cssVar } from '@chakra-ui/react'

const $startColor = cssVar('skeleton-start-color')
const $endColor = cssVar('skeleton-end-color')

const red = defineStyle({
  _light: {
    [$startColor.variable]: 'colors.red.100', //changing startColor to red.100
    [$endColor.variable]: 'colors.red.400', // changing endColor to red.400
  },
  _dark: {
    [$startColor.variable]: 'colors.red.800', //changing startColor to red.800
    [$endColor.variable]: 'colors.red.600', // changing endColor to red.600
  },
})
export const skeletonTheme = defineStyleConfig({
  variants: { red },
})
```

After customizing the skeleton theme, we can import it in our theme file and add
it in the `components` property:

```jsx live=false
import { extendTheme } from '@chakra-ui/react'
import { skeletonTheme } from './components/skeleton'
export const theme = extendTheme({
  components: { Skeleton: skeletonTheme },
})
```

> This is a crucial step to make sure that any changes that we make to the
> skeleton theme are applied.

## Adding a custom size

Let's assume we want to include an extra large skeleton size. Here's how we can
do that:

```jsx live=false
import { defineStyle, defineStyleConfig } from '@chakra-ui/react'
const xl = defineStyle({
  h: 9,
  borderRadius: 'lg',
})
export const skeletonTheme = defineStyleConfig({
  sizes: { xl },
})
// Now we can use the new `xl` size
<Skeleton size="xl">...</Skeleton>
```

Every time you're adding anything new to the theme, you'd need to run the CLI
command to get proper autocomplete in your IDE. You can learn more about the CLI
tool [here](/docs/styled-system/cli).

## Changing the default properties

Let's assume we want to change the default size or variant of every Skeleton in
our app. Here's how we can do that:

```jsx live=false
import { defineStyleConfig } from '@chakra-ui/react'
export const skeletonTheme = defineStyleConfig({
  defaultProps: {
    size: 'xl',
    variant: 'red',
  },
})
// This saves you time, instead of manually setting the size,
// variant and color scheme every time you use a skeleton:
<Skeleton size="lg" variant="red">...</Skeleton>
```

## Showcase

import {
  App,
  Index,
  SkeletonTheme,
} from 'configs/sandpack-contents/component-theming/skeleton'

<SandpackEmbed
  files={{
    '/theme/components/Skeleton.ts': SkeletonTheme,
    '/App.tsx': App,
    '/index.tsx': {
      code: Index,
      hidden: true,
    },
  }}
  dependencies={{
    'react-icons': '^4.4.0',
  }}
  previewOptions={{
    minHeight: '500px',
  }}
/>