# Skeleton

> `Skeleton` is part of the States set, imported from `@jcsoftdev/ui/states`.

Source: https://ui.jcsoftdev.com/docs/components/skeleton

`Skeleton` is part of the States set, imported from `@jcsoftdev/ui/states`.

## Import

```ts
import { Skeleton } from "@jcsoftdev/ui/states";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/states/skeleton`.

## Usage

```tsx
<Skeleton variant="lines" lines={3} rows={4} label="Cargando clientes" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"table" \| "lines" \| "card"` | `"lines"` |  |
| `lines` | `number` | `3` | Number of lines for the `lines` variant. |
| `rows` | `number` | `4` | Number of rows for the `table` variant. |
| `label` | `string` | `"Loading"` | Text announced to screen readers while loading. |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/states-skeleton--default)
- [Lines](/storybook/?path=/story/states-skeleton--lines)
- [Table](/storybook/?path=/story/states-skeleton--table)
- [Card](/storybook/?path=/story/states-skeleton--card)

## Source

`packages/ui/src/states/skeleton/skeleton.tsx`