Chewypixel component
Shimmer
Text with a band of light sweeping across it, for loading and thinking states.
Installation
npx shadcn@latest add @chewypixel/shimmerUsage
import { Shimmer } from "@/components/ui/shimmer";
export function Thinking() {
return <Shimmer className="text-sm">Thinking…</Shimmer>;
}Props
durationHow long one sweep takes, in seconds. With reduced motion, the text stays still.
number = 2
classNameClasses for the text.
string
Released under the MIT License.
More components
- Status GraphicIllustrations for error pages: a wandering search icon for 404, a pulsing lock for 403 and a spinning ring for 500.
- Segmented ControlMutually exclusive options with a highlight that slides to the selected one.
- TabsUnderline tabs. The underline slides to the active tab and resizes to fit its label.
- SwitchA switch whose thumb springs across when toggled and stretches while pressed.
See them in a real app
These components come from Fizz, our AI chat template built with Next.js, shadcn/ui and Motion.