---
title: "MazCardSpotlight"
description: "MazCardSpotlight is a card with a glowing spotlight that follows the mouse cursor on its border and background, to highlight features, pricing plans or call to actions"
package: "maz-ui"
url: "https://maz-ui.com/components/maz-card-spotlight"
---

# MazCardSpotlight

> MazCardSpotlight is a card with a glowing spotlight that follows the mouse cursor on its border and background, to highlight features, pricing plans or call to actions

- Package: `maz-ui`
- Import: `import MazCardSpotlight from 'maz-ui/components/MazCardSpotlight'`
- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
- Web: https://maz-ui.com/components/maz-card-spotlight

> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)

**This component is better in dark mode**

**Tip:**

If you want to increase the border width, you must just add padding @default: `var(--maz-border-width)` (1px)

## Basic usage

```vue
<script lang="ts" setup>
import { useTheme } from '@maz-ui/themes/composables/useTheme'
import MazCardSpotlight from 'maz-ui/components/MazCardSpotlight'

const { setColorMode } = useTheme()
</script>

<template>
  <MazCardSpotlight style="width: 500px; max-width: 100%;">
    <h3 style="margin-top: 0; Fmargin-bottom: 30px;">
      Hover this component <br>
      To see the magic appear
    </h3>
    <MazBtn color="contrast" @click="setColorMode('light')">
      Switch to light theme
    </MazBtn>
  </MazCardSpotlight>
</template>
```

## Effect with multiple cards and with secondary color

```html
<div class="grid gap-4 grid-cols-1 mob-l:grid-cols-2 tab-l:grid-cols-3">
  <MazCardSpotlight v-for="competition of competitions" :key="competition.label" color="secondary">
    <div class="flex p-4">
      <MazAvatar
        v-if="competition.areaEnsignUrl"
        :src="competition.areaEnsignUrl"
        style="margin-right: 16px"
        size="0.8rem"
      />
      <div class="truncate flex column">
        <span class="truncate"> {{ competition.label }} </span>
        <span class="truncate"> {{ competition.area }} </span>
      </div>
    </div>
  </MazCardSpotlight>
</div>
```

## MazCardSpotlight API

`import MazCardSpotlight from 'maz-ui/components/MazCardSpotlight'`

### Props

- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`, default: `"primary"`): The color of the component.
- `elevation` (`boolean`, default: `false`): Add elevation to the component.
- `padding` (`boolean`, default: `true`): Add padding to the content.
- `content-class` (`ClassValue`): The classes to apply to the content div.
- `content-style` (`StyleValue`): Style apply to the content div.
- `inner-opacity` (`number`, default: `0.95`): The opacity of the inner div - should be between 0 and 1 When 0 the spotlight is completely visible When 1 the spotlight is only visible on borders.

### Slots

- `#default`