Magic Card

Installation

pnpm dlx @glinui/cli@latest add magic-card

Credits. Adapted from Magic UI (MIT, (c) Magic UI). Removed motion and next-themes, CSS variables written on animation frames, token colors, fine pointer gating and a glass variant. Attribution details.

Prefer the package? npm install @glinui/ui @glinui/motion @glinui/tokens

Usage

Overlap verdict versus SpotlightCard: about 40 percent. SpotlightCard is a glass-only soft spotlight. MagicCard also lights the border, works on the solid token surface and activates on keyboard focus, so both stay. Use SpotlightCard for a pure glass glow and MagicCard for border-follow grids.

The pointer effect only runs on fine pointers `(hover: hover) and (pointer: fine)`. Touch and coarse pointers get a static card.

import { MagicCard } from "@glinui/ui"
// Omit `variant` to follow the ambient style (glinr by default).
export function MagicCardVariants() {

import { MagicCard } from "@glinui/ui"


// Omit `variant` to follow the ambient style (glinr by default).
export function MagicCardVariants() {
  return (
    <>
      <MagicCard variant="glinr">
        ...
      </MagicCard>
      <MagicCard variant="plain">
        ...
      </MagicCard>
      <MagicCard variant="solid">
        ...
      </MagicCard>
      <MagicCard variant="glass">
        ...
      </MagicCard>
    </>
  )
}

import { MagicCard } from "@glinui/ui"
export function MagicCardTones() {
  return (

import { MagicCard } from "@glinui/ui"


export function MagicCardTones() {
  return (
    <MagicCard gradientFrom="var(--tone-success)" gradientColor="color-mix(in oklab, var(--tone-success) 24%, transparent)">
      ...
    </MagicCard>
  )
}

// A pricing row where the highlighted plan is a MagicCard.
import { MagicCard } from "@glinui/ui"
export function MagicCardLayout() {

// A pricing row where the highlighted plan is a MagicCard.
import { MagicCard } from "@glinui/ui"


export function MagicCardLayout() {
  return (
    <section className="grid gap-4 sm:grid-cols-3">
      ...
    </section>
  )
}

Accessibility

• Decorative layers are aria-hidden and pointer-events-none, so nested links and buttons stay clickable.
• Content sits above the layers in DOM and paint order. Reading order is untouched.
• Keyboard focus inside the card lights it from the center, so the effect is not pointer only.

Reduced Motion

With motion level none, subtle or prefers-reduced-motion the card is fully static: no tracking, no highlight layers shown.

API Reference

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

import { MagicCard } from "@glinui/ui"