Components
Card New · experimental
shadcn's Card, static by default. Add goo and the edge nearest the pointer swells gently toward it in a low, wide mound.
Project Apollo
Three tasks due this week.
Customize
GoopCard, GoopCardHeader, GoopCardTitle, GoopCardDescription, GoopCardAction, GoopCardContent, and GoopCardFooter are shadcn-vue's Card parts, with the same markup and classes. A card is static unless you turn the goo on.
Installation
Install @goopui/nuxt or @goopui/vue as shown on the Button page. The Nuxt module auto-imports every Card part.
Usage
<script setup lang="ts">
// Nuxt auto-imports these. In plain Vue, import them:
import { GoopCard, GoopCardAction, GoopCardContent, GoopCardDescription, GoopCardFooter, GoopCardHeader, GoopCardTitle } from '@goopui/vue'
</script>
<template>
<GoopCard class="max-w-sm">
<GoopCardHeader>
<GoopCardTitle>Project Apollo</GoopCardTitle>
<GoopCardDescription>Three tasks due this week.</GoopCardDescription>
<GoopCardAction>
<GoopBadge variant="outline">Live</GoopBadge>
</GoopCardAction>
</GoopCardHeader>
<GoopCardContent>A plain card: no goo unless you ask for it.</GoopCardContent>
<GoopCardFooter class="gap-2">
<GoopButton size="sm">Open</GoopButton>
<GoopButton size="sm" variant="outline">Later</GoopButton>
</GoopCardFooter>
</GoopCard>
</template>
Goo hover
<GoopCard goo>...</GoopCard>
Project Apollo
Three tasks due this week.
- swell. While a mouse or pen is over the card, the edge nearest to it swells outward in a low, wide mound centred on the pointer (about 3px high on playful). The mound trails the pointer with a soft spring, grows as you near the edge, and settles flat when you leave. Near a corner, both edges swell a little.
It's one aria-hidden SVG path behind the card's content, with no filter. The path redraws the card's own background, border, and corners, so where there's no mound it sits exactly on the card. It only redraws while the mound moves, and it hides once the card is flat. Touch has no hover, so on phones the card stays static.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
class | string | array | object | Merged onto the root. | |
goo | boolean | false | Turns the edge swell on. Off: a plain shadcn Card. |
swell | boolean | number | true | With goo on, the edge nearest the pointer swells toward it in a low, wide mound. A number scales its height. |
speed | number | 1 | Animation speed multiplier. |
preset | 'subtle' | 'playful' | 'wild' | app config, then playful | The feel. |
The parts (GoopCardHeader and the rest) take class only, like shadcn's. GoopCard exposes handle (the live card handle, null before mount or with goo off) and el.
Accessibility
The goo layer is aria-hidden and can't be clicked, and the card's content is never filtered. Under reduced motion the card never swells. See Accessibility & reduced motion.