Glare Card

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

Install using CLI

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

Install Manually

Copy and paste the following code

GlareCard.vue

Examples

Multiple Cards

API

Prop NameTypeDefaultDescription
classstring-Additional Tailwind CSS class names to apply to the card.

Features

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

Credits

Flip Card
A dynamic flip card with smooth 180-degree flipping animations along both the X and Y axes, providing an engaging and interactive visual effect.
iPhone Mockup
An SVG mockup of an iPhone.