

<Preview name="ShimmerDefaultExample" />

## Overview [#overview]

`Shimmer` renders animated text for temporary chat states such as thinking, searching, or streaming.

## Usage [#usage]

```tsx
import { Shimmer } from "@tilt-legal/cubitt-components/chat-elements";
```

## Examples [#examples]

### Default [#default]

<Tabs items="['Preview', 'Code']">
  <Tab value="Preview">
    <Preview name="ShimmerDefaultExample" />
  </Tab>

  <Tab value="Code">
    ```tsx
    <Shimmer>Reviewing sources and preparing a response...</Shimmer>
    ```
  </Tab>
</Tabs>

### Heading [#heading]

<Tabs items="['Preview', 'Code']">
  <Tab value="Preview">
    <Preview name="ShimmerHeadingExample" />
  </Tab>

  <Tab value="Code">
    ```tsx
    <Shimmer as="h3" className="font-medium text-lg">
      Checking citations
    </Shimmer>
    ```
  </Tab>
</Tabs>
