ChatShimmer Soon

Display a text shimmer animation effect.

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.

label

Thinking...

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

Duration

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

label

duration

Thinking...

<template>
  <UChatShimmer label="Thinking..." :duration="4" />
</template>

Spread

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

label

spread

Thinking...

<template>
  <UChatShimmer label="Thinking..." :spread="5" />
</template>

API

Props

Prop	Default	Type
`as`	`'span'`	`any` The element or component this component should render as.
`label`		`string` The label to display with the shimmer effect.
`duration`	`2`	`number` The duration of the shimmer animation in seconds.
`spread`	`2`	`number` The spread multiplier for the shimmer highlight. The actual spread is computed as `label.length * spread` in pixels.
`ui`		`{}`

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    chatShimmer: {
      base: 'text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--ui-text-highlighted),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-text-muted),var(--ui-text-muted))] animate-[shimmer_var(--duration)_linear_infinite] will-change-[background-position]'
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        chatShimmer: {
          base: 'text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--ui-text-highlighted),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-text-muted),var(--ui-text-muted))] animate-[shimmer_var(--duration)_linear_infinite] will-change-[background-position]'
        }
      }
    })
  ]
})

Changelog

No recent changes

ChatPromptSubmit

A Button for submitting chat prompts with automatic status handling.

Editor

A rich text editor component based on TipTap with support for markdown, HTML, and JSON content types.