Drift Card

An interactive card with a drift hover effect that visually highlights content.

Preview

Installation

npx shadcn@latest add https://scrollxui.dev/registry/drift-card.json 

Usage

import DriftCard from "@/components/ui/drift-card";
<DriftCard className="w-full max-w-md h-72 mx-auto relative overflow-hidden">
      <img
        src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=1200&auto=format&fit=crop"
        alt="Preview"
        className="w-full h-full object-cover rounded-xl"
      />
    </DriftCard>

API Reference

Drift Card

An interactive card with a drift hover effect that visually highlights content

Props

PropertyTypeDefaultDescription
childrenReactNode
Content rendered inside the drifting card.
classNamestring
Additional classes to customize the container styling.
styleCSSProperties
Inline styles passed to the outermost container.
...propsHTMLAttributes<HTMLDivElement>
Any additional div attributes.

Built withby Ahdeetai.