Skip to main content
A card component featuring a glare effect that activates on hover, creating a subtle light reflection across the card surface. Inspired by Linear’s website design.

Installation

npx inspira-ui add glare-card

Usage

<template>
  <GlareCard class="p-6">
    <h3>Card Title</h3>
    <p>Hover over this card to see the glare effect.</p>
  </GlareCard>
</template>

<script setup>
import { GlareCard } from '@/components/ui/glare-card'
</script>

Props

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

Credits

Build docs developers (and LLMs) love