MagicCard
magic-cardAdds a pointer-following gradient highlight to a content card.
Usage
Basic usage
When the mouse moves into the card, the radial highlight follows the cursor position.
Magic CardMove the mouse up to see the highlights
tsx
<MagicCard className="h-44 w-72">
<div className="flex h-full flex-col items-center justify-center gap-1 p-6">
<span className="text-lg font-semibold text-foreground">Magic Card</span>
<span className="text-sm text-muted">Move the mouse up to see the highlight</span>
</div>
</MagicCard>Highlight radius and intensity
gradientSize controls the highlight diameter, gradientOpacity controls the intensity of hover.
Bigger and brighter highlights
tsx
<MagicCard className="h-44 w-72" gradientSize={320} gradientOpacity={0.3}>
<div className="flex h-full items-center justify-center p-6">
<span className="text-sm text-muted">Bigger and brighter highlights</span>
</div>
</MagicCard>Custom highlight color
gradientColor can be changed to any CSS color (the default is var (--color-primary) with the theme).
Change to a highlight color
tsx
<MagicCard className="h-44 w-72" gradientColor="var(--color-chart-3)">
<div className="flex h-full items-center justify-center p-6">
<span className="text-sm text-muted">Change to a highlight color</span>
</div>
</MagicCard>When to use
Use MagicCard to add a subtle pointer-following highlight to one landing-page or feature card. Use BentoGrid for a varied feature grid, or a plain Card when interaction is unnecessary.
Import
ts
import { MagicCard } from "@hulianui/ui"Props
Inherits ComponentPropsWithoutRef<"div">.
| Name | Type | Default | Description |
|---|---|---|---|
| gradientSize | number | 200 | Highlight radius in pixels. |
| gradientColor | string | var(--color-primary) | Highlight color. |
| gradientOpacity | number | 0.15 | Highlight opacity. |
| ...div | ComponentPropsWithoutRef\<"div"\> | — | Forwarded props; className controls size. |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Card content. |
Example
tsx
<MagicCard className="h-44 w-72">
<div className="flex h-full flex-col items-center justify-center gap-1 p-6">
<span className="text-lg font-semibold text-foreground">Magic Card</span>
<span className="text-sm text-muted">Move the pointer to reveal the glow</span>
</div>
</MagicCard>Usage notes
- Pointer movement makes this a client component. The effect is progressive enhancement and does not trigger on touch-only devices.
- Use full token names such as
var(--color-primary)forgradientColor; see [[hulian-token-color-var-needs-color-prefix]].
Related
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
Magic CardMove the mouse up to see the highlights
<MagicCard gradientSize={200} gradientOpacity={0.15}>...</MagicCard>