For Tailwind CSS v3 docs, click here.

Glare Card

A glare effect that happens on hover, as seen on Linear's website.

通过 CLI 安装

npm
pnpm
bun
yarn
npx shadcn-vue@latest add "https://registry.inspira-ui.com/glare-card.json"

手动安装

复制并粘贴以下代码：

GlareCard.vue

示例

Multiple Cards

API

Prop 名称类型默认值描述
classstring-Additional Tailwind CSS class names to apply to the card.

功能特性

  • Slot Support: Easily add any content inside the component using the default slot.

感谢

翻转卡片
A dynamic flip card with smooth 180-degree flipping animations along both the X and Y axes, providing an engaging and interactive visual effect.
流体光标
一个模拟流体运动的GPU加速动画光标轨迹。