Cards

Glowing Stars Card

Card component with animated glowing stars effect and customizable colors.

The GlowingStarsCard component creates a card with an animated glowing stars effect. It features interactive stars that glow on hover and automatically animate at random intervals.

Usage

✨ Cosmic Dashboard

Interactive starfield visualization

Active 
<template>
  <MGlowingStarsCard>
    <template #header>
      <h2 class="font-bold text-2xl text-[#eaeaea]">
        ✨ Cosmic Dashboard
      </h2>
    </template>
    <div class="text-center space-y-3">
      <p class="text-white/80 text-sm">
        Interactive starfield visualization
      </p>
      <UBadge
        color="primary"
        variant="soft"
      >
        Active
      </UBadge>
    </div>
    <template #footer>
      <UButton
        icon="i-heroicons-rocket-launch"
        color="neutral"
        variant="solid"
        class="w-full"
      >
        Launch Experience
      </UButton>
    </template>
  </MGlowingStarsCard>
</template>

Examples

Basic Glowing Stars Card

Premium Features

PRO

Blazing quick

Optimized performance with instant loading and minimal resource usage

Secure & Private

Enterprise-grade security for your data with end-to-end encryption

Beautiful Effects

Stunning animations and visual experiences that captivate users

Global Access

Access your data from anywhere with our worldwide CDN network 

<template>
  <MGlowingStarsCard class="max-w-md mx-auto">
    <template #header>
      <div class="flex items-center justify-between mb-6">
        <h2 class="font-bold text-3xl text-[#eaeaea]">
          Premium Features
        </h2>
        <UBadge
          color="primary"
          variant="soft"
        >
          PRO
        </UBadge>
      </div>
    </template>
    <div class="py-6 space-y-6">
      <div class="flex items-start p-4 bg-default/5 backdrop-blur-sm rounded-lg hover:bg-default/10 transition-colors">
        <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-400 to-cyan-400 flex items-center justify-center mr-4 flex-shrink-0">
          <UIcon
            name="i-lucide-zap"
            class="w-5 h-5 text-white"
          />
        </div>
        <div>
          <h3 class="font-semibold text-white mb-1">
            Blazing quick
          </h3>
          <p class="text-dimmed text-sm">
            Optimized performance with instant loading and minimal resource usage
          </p>
        </div>
      </div>
      <div class="flex items-start p-4 bg-default/5 backdrop-blur-sm rounded-lg hover:bg-default/10 transition-colors">
        <div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-400 to-pink-400 flex items-center justify-center mr-4 flex-shrink-0">
          <UIcon
            name="i-lucide-shield"
            class="w-5 h-5 text-white"
          />
        </div>
        <div>
          <h3 class="font-semibold text-white mb-1">
            Secure & Private
          </h3>
          <p class="text-dimmed text-sm">
            Enterprise-grade security for your data with end-to-end encryption
          </p>
        </div>
      </div>
      <div class="flex items-start p-4 bg-default/5 backdrop-blur-sm rounded-lg hover:bg-default/10 transition-colors">
        <div class="w-10 h-10 rounded-full bg-gradient-to-r from-green-400 to-teal-400 flex items-center justify-center mr-4 flex-shrink-0">
          <UIcon
            name="i-lucide-sparkles"
            class="w-5 h-5 text-white"
          />
        </div>
        <div>
          <h3 class="font-semibold text-white mb-1">
            Beautiful Effects
          </h3>
          <p class="text-dimmed text-sm">
            Stunning animations and visual experiences that captivate users
          </p>
        </div>
      </div>
      <div class="flex items-start p-4 bg-default/5 backdrop-blur-sm rounded-lg hover:bg-default/10 transition-colors">
        <div class="w-10 h-10 rounded-full bg-gradient-to-r from-orange-400 to-red-400 flex items-center justify-center mr-4 flex-shrink-0">
          <UIcon
            name="i-lucide-globe"
            class="w-5 h-5 text-white"
          />
        </div>
        <div>
          <h3 class="font-semibold text-white mb-1">
            Global Access
          </h3>
          <p class="text-dimmed text-sm">
            Access your data from anywhere with our worldwide CDN network
          </p>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="flex flex-col sm:flex-row gap-3 mt-6">
        <UButton
          color="primary"
          variant="solid"
          block
          class="flex-1"
        >
          Upgrade Now
        </UButton>
        <UButton
          color="neutral"
          variant="outline"
          block
          class="flex-1"
        >
          View Plans
        </UButton>
      </div>
    </template>
  </MGlowingStarsCard>
</template>

Customize

Motion primitive

Hover, drag or scroll to interact

Customize

Star Bg Classbg-primary-400 dark:bg-primary-500 shadow-primary-400/50 dark:shadow-primary-500/50

Props

Prop Type Default Description
starBgClassstring'bg-primary-400 dark:bg-primary-500 shadow-primary-400/50 dark:shadow-primary-500/50'CSS classes to apply to the glowing stars for custom colors.
uiobject{}UI configuration for the underlying UCard component.

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.glowingStarsCard in app.config.ts.

Prop Type Default Description
uiobject-Per-slot classes merged over the theme defaults.
Slot Props Description
root-
stars-flex-1 flex items-center justify-center
grid-h-48 w-full grid grid-cols-18 gap-px
cell-relative flex items-center justify-center
star-h-px w-px rounded-full relative z-20
glow-absolute left-1/2 -translate-x-1/2 z-10 h-1 w-1 rounded-full blur-[1px] shadow-2xl
content-

Glow Hover Cards

A responsive grid of cards, each with a radial glow that follows the pointer inside it.

Mac Terminal

A macOS-style terminal window that types a scripted shell session, with traffic-light controls and a blinking caret.

Copyright © 2026