Components
Skeleton New · experimental
shadcn's Skeleton with a slow goo shimmer instead of the grey pulse. A soft, low mound of lighter goo drifts across each shape.
Customize
GoopSkeleton is shadcn-vue's Skeleton: a div with bg-accent rounded-md, sized and shaped with your own classes. Only the loading animation changes.
Installation
Install @goopui/nuxt or @goopui/vue as shown on the Button page. The Nuxt module auto-imports GoopSkeleton.
Usage
<script setup lang="ts">
// Nuxt auto-imports this. In plain Vue, import it:
import { GoopSkeleton } from '@goopui/vue'
</script>
<template>
<div class="flex items-center gap-4">
<GoopSkeleton class="size-12 rounded-full" />
<div class="grid gap-2">
<GoopSkeleton class="h-4 w-[250px]" />
<GoopSkeleton class="h-4 w-[200px]" />
</div>
</div>
</template>
What it does
- shimmer. A low, wide mound of slightly lighter goo rises from the bottom edge of the shape and drifts across it, then rests off-shape for a moment before the next pass.
It's built to be cheap. The mound is one CSS gradient moved with a transform, so no script runs per frame and nothing is filtered. A page with hundreds of skeletons stays smooth.
The crest is white at --goop-shimmer-base opacity: 0.85 on a light theme (the accent is pale) and 0.075 under .dark. Set the var on any ancestor to tune it.
<GoopSkeleton class="h-32 w-full rounded-xl" />
<GoopSkeleton class="h-4 w-3/4" />
<GoopSkeleton class="h-4 w-1/2" />
Presets and shimmer off
preset changes the pace and brightness. :shimmer="false" renders shadcn's own animate-pulse.
<GoopSkeleton class="h-4 w-full" preset="subtle" />
<GoopSkeleton class="h-4 w-full" preset="wild" />
<GoopSkeleton class="h-4 w-full" :shimmer="false" />
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
class | string | array | object | Merged onto the root. Size and shape it with classes, like shadcn. | |
shimmer | boolean | number | true | A low mound of lighter goo drifts across. A number scales its brightness. false: shadcn's pulse. |
speed | number | 1 | Animation speed multiplier. |
preset | 'subtle' | 'playful' | 'wild' | app config, then playful | The feel. |
Accessibility
A skeleton is decoration. Pair it with an aria-busy="true" region or a visually hidden "Loading" message, as you would with shadcn's.
Under reduced motion the shimmer stops and the skeleton is a plain, static shape. See Accessibility & reduced motion.