Компоненты/Карточки с градиентом

Карточки с градиентом

29 сентября 2026

Карточки, по краю которых за курсором плывёт мягкое градиентное пятно, разрастающееся при наведении.

Установка

npm install clsx motion tailwind-merge
pnpm add clsx motion tailwind-merge
yarn add clsx motion tailwind-merge
bun add clsx motion tailwind-merge

Файлы

gradient-hover-cards.tsx
НазадТягучий переключательДалееГамбургер

Под полупрозрачной рамкой карточки прячется круглое пятно из голубого, фиолетового, розового и оранжевого. Оно следует за курсором и просвечивает по краю карточки, а при наведении разрастается втрое, окрашивая всю рамку. Сама карточка чуть увеличивается, а при нажатии пружинисто сжимается.

В тёмной теме пятно по умолчанию становится монохромным, чтобы не спорить с тёмным фоном; это поведение можно отключить.

Вручную

Скопируйте эти файлы в components/gradient-hover-cards/:

Общие помощники положите в lib/ проекта:

Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.

Использование

import { GradientCard, GradientCardBody, GradientCardTitle } from "@/components/gradient-hover-cards/gradient-hover-cards";

export function Card() {
return (
  <GradientCard className="p-1" circleSize={360}>
    <GradientCardBody>
      <img src="/cover.jpg" alt="" className="rounded-2xl" />
    </GradientCardBody>
    <GradientCardTitle>Ноябрь 005</GradientCardTitle>
  </GradientCard>
);
}

Пропсы

Пропс
Описание
circleSize?

Диаметр градиентного пятна в пикселях

Тип number·По умолчанию 400

colors?

Цвета градиента пятна

Тип string[]·По умолчанию GRADIENT_CARD_COLORS

monochromeInDark?

Обесцвечивать пятно в тёмной теме

Тип boolean·По умолчанию true

className?

Классы блока с содержимым

Тип string

children?

GradientCardBody и GradientCardTitle

Тип ReactNode