<script setup lang="ts">

import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from 'reka-ui'

import { useScroll, useResizeObserver } from '@vueuse/core'

import ChatShimmer from './ChatShimmer.vue'

const props = withDefaults(defineProps<{

text?: string

/>

<UIcon v-else-if="icon" :name="icon" class="size-4 shrink-0" />

<ChatShimmer v-if="streaming" :text="thinkingMessage" class="truncate" />

<UChatShimmer v-if="streaming" :label="thinkingMessage" class="truncate" />

<span v-else class="truncate">{{ thinkingMessage }}</span>

<UIcon

<script setup lang="ts">

import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from 'reka-ui'

import ChatShimmer from './ChatShimmer.vue'

const props = withDefaults(defineProps<{

text: string

/>

<span class="truncate">

<ChatShimmer v-if="streaming" :text="text" />

<UChatShimmer v-if="streaming" :label="text" />

<template v-else>{{ text }}</template>

<span v-if="suffix" class="text-dimmed ms-1">{{ suffix }}</span>

</span>

---

title: ChatShimmer

description: Display a text shimmer animation effect.

category: chat

links:

- label: GitHub

icon: i-simple-icons-github

to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/ChatShimmer.vue

navigation.badge: Soon

---

## Usage

The ChatShimmer component renders an element with an animated shimmer gradient over text, commonly used to indicate streaming or loading states in chat interfaces.

::component-code

---

props:

label: 'Thinking...'

---

::

### Duration

Use the `duration` prop to control the animation speed in seconds.

::component-code

---

props:

label: 'Thinking...'

duration: 4

---

::

### Spread

Use the `spread` prop to control the width of the shimmer highlight. The actual spread is computed as `label.length * spread` in pixels.

::component-code

---

props:

label: 'Thinking...'

spread: 5

---

::

## API

### Props

:component-props

## Theme

:component-theme

## Changelog

:component-changelog

'calendar',

'card',

'carousel',

'chat-shimmer',

'changelog-version',

'changelog-versions',

'checkbox-group',

<template>

<div class="flex flex-col items-start gap-4">

<UChatShimmer label="Thinking..." />

<UChatShimmer label="Loading content..." :duration="4" />

<UChatShimmer label="Generating response..." :spread="5" />

</div>

</template>

import { gateway } from '@ai-sdk/gateway'

const webSearchTool = anthropic.tools.webSearch_20250305({

maxUses: 5

maxUses: 1

})

export default defineEventHandler(async (event) => {

effort: 'low'

} satisfies AnthropicLanguageModelOptions

}

}).toUIMessageStreamResponse({

sendReasoning: true,

sendSources: true

})

}).toUIMessageStreamResponse()

})

<script lang="ts">

import type { AppConfig } from '@nuxt/schema'

import theme from '#build/ui/chat-shimmer'

import type { ComponentConfig } from '../types/tv'

type ChatShimmer = ComponentConfig<typeof theme, AppConfig, 'chatShimmer'>

export interface ChatShimmerProps {

/**

* The element or component this component should render as.

* @defaultValue 'span'

*/

as?: any

/**

* The label to display with the shimmer effect.

*/

label: string

/**

* The duration of the shimmer animation in seconds.

* @defaultValue 2

*/

duration?: number

/**

* The spread multiplier for the shimmer highlight. The actual spread is computed as `label.length * spread` in pixels.

* @defaultValue 2

*/

spread?: number

class?: any

ui?: ChatShimmer['slots']

}

</script>

<script setup lang="ts">

import { computed } from 'vue'

import { Primitive } from 'reka-ui'

import { useAppConfig } from '#imports'

import { useComponentUI } from '../composables/useComponentUI'

import { tv } from '../utils/tv'

const props = withDefaults(defineProps<ChatShimmerProps>(), {

as: 'span',

duration: 2,

spread: 2

})

const appConfig = useAppConfig() as ChatShimmer['AppConfig']

const uiProp = useComponentUI('chatShimmer', props)

// eslint-disable-next-line vue/no-dupe-keys

const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chatShimmer || {}) }))

const spread = computed(() => props.label.length * props.spread)

</script>

<template>

<Primitive

:as="as"

:style="{

'--spread': `${spread}px`,

'--duration': `${duration}s`

}"

data-slot="base"

:class="ui({ class: [uiProp?.base, props.class] })"

>

{{ label }}

</Primitive>

</template>