# SkeletonGroup

> One status announcement for every `Skeleton` inside; they render silent.

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

One status announcement for every `Skeleton` inside; they render silent.

## Import

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

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

## Usage

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` |  | Text announced once for the whole region. Defaults to the localized "Loading". |
| `className` | `string` |  |  |
| `children` * | `ReactNode` |  |  |

`*` 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)
- [List](/storybook/?path=/story/states-skeleton--list)
- [Kpis](/storybook/?path=/story/states-skeleton--kpis)
- [Key Value](/storybook/?path=/story/states-skeleton--key-value)
- [Bar](/storybook/?path=/story/states-skeleton--bar)

## Source

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