StorybookGitHub

Shimmer

An animated shimmering text or inline-content effect.

Generating summary…

Installation

npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/shimmer.json

Usage

Use shimmer to draw attention to short pieces of text, such as a loading label or a highlighted callout, without the block-level placeholder look of a skeleton. Pass as-child to apply the effect to an existing element instead of the default <p>.

<script setup lang="ts">
import { Shimmer } from "@/components/ui/shimmer";
</script>

<template>
  <Shimmer class="text-sm font-medium">Generating response...</Shimmer>
</template>

Built on reka-ui's Primitive so it can render as any element via the as prop.