HomeComponentsNeon Gradient Card

Primitive / Molecule • Neon Gradient Card

Radix UI Base UI

Primitive / MoleculeAdapted from Magic UIbeta

Neon Gradient Card

Card with an animated neon gradient ring and soft glow.

pnpm dlx @glinui/cli@latest add neon-gradient-card

ProBilled monthly

$24/ seat

Unlimited projects
Priority support
Audit log export

Installation

Install from

pnpm dlx @glinui/cli@latest add neon-gradient-card

Credits. Adapted from Magic UI (MIT, (c) Magic UI). Token colors, padding based ring without a ResizeObserver, Web Animations gated by motion level and a glass variant. Attribution details.

Prefer the package?

Usage

Improvements: one blur layer (smaller on phones), a static ring instead of the glow when motion is none, forced-colors fallback border, and an inner surface on the background token so text keeps contrast.

Variants

glinr is the default, plain is flat shadcn, solid is a neutral tonal face, glass is opt-in and needs a backdrop.

glinr

Crisp on any stage.

Learn more

plain

Crisp on any stage.

Learn more

solid

Crisp on any stage.

Learn more

glass

Opt-in. Needs a backdrop.

Learn more

import { NeonGradientCard } from "@glinui/ui"


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

Colors

`neonColors` takes any two tokens or colors.

accent

The effect color follows the tone token.

Learn more

success

The effect color follows the tone token.

Learn more

warning

The effect color follows the tone token.

Learn more

danger

The effect color follows the tone token.

Learn more

info

The effect color follows the tone token.

Learn more

import { NeonGradientCard } from "@glinui/ui"


export function NeonGradientCardTones() {
  return (
    <NeonGradientCard neonColors={{ firstColor: "var(--tone-success)", secondColor: "var(--color-accent)" }}>
      ...
    </NeonGradientCard>
  )
}

In a layout

A pricing row where the highlighted plan wears the neon ring.

StarterBilled monthly

$0/ seat

Unlimited projects
Priority support
Audit log export

ProBilled monthly

$24/ seat

Unlimited projects
Priority support
Audit log export

TeamBilled monthly

$60/ seat

Unlimited projects
Priority support
Audit log export

// A pricing row where the highlighted plan wears the neon ring.
import { NeonGradientCard } from "@glinui/ui"


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

Accessibility

Ring and glow are aria-hidden decorations. Text lives on the background token face for reliable contrast.
Under forced-colors the layers are hidden and a CanvasText border is used.
Nothing depends on the animation.

ARIA Attributes

Decorative layers use `aria-hidden="true"`
`data-animated` reflects the running state

Reduced Motion

At motion level none, subtle or with prefers-reduced-motion the gradient stops, and the blurred glow is removed leaving a static ring.

Affected properties

gradient spinglow layer

API Reference

Prop	Type	Required	Default	Description
`variant`	`NeonVariant \| null`	No	`ambient (glinr)`	Face under the ring. Glass is opt-in (translucent blurred face with a masked ring).
`borderSize`	`number`	No	`2`	Ring thickness in pixels.
`borderRadius`	`number`	No	`20`	Outer radius in pixels. The face radius is derived.
`neonColors`	`Partial<NeonColors>`	No	`accent, signal-ok`	Gradient colors.
`duration`	`number`	No	`6`	Seconds per gradient cycle.
`contentClassName`	`string`	No	`-`	Class for the inner face (padding, min-height).

Source

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

Import

import { NeonGradientCard } from "@glinui/ui"

Source Files

neon-gradient-card.tsx motion-engine.tsx

neon-gradient-card.test.tsxtest

Dependencies

@glinui/ui@glinui/motionclass-variance-authority

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/neon-gradient-card.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

NeonGradientCardProps

`NeonGradientCardProps`

Prop	Type	Required	Default	Description
`borderRadius`	`number`	No	`20`	Outer corner radius in pixels.
`borderSize`	`number`	No	`2`	Ring thickness in pixels.
`contentClassName`	`string`	No	`-`	Class for the inner content face.
`duration`	`number`	No	`6`	Seconds per gradient cycle.
`neonColors`	`Partial<NeonColors>`	No	`-`	Gradient colors. Default to the accent and signal tokens.
`variant`	`NeonVariant \| null`	No	`-`	Face under the neon ring. Omitted follows the ambient style (glinr by default). `glass` is opt-in.