Hover Lift

Card that rises and gains depth on hover.

Hover effectsServer-safe

Lift on hover

Rises with a deeper shadow.

Install

bash

npx @agents-npm-packages/vibeui add hover-lift --dir ./src/components/ui

Import

tsx

import { HoverLift } from "@/components/ui/hover-lift"

API

Generated from the component's TypeScript types, so it always matches the source. * marks a required prop.

<HoverLift>

Prop	Type	Default	Description
children*	ReactNode	—	Content rendered inside the component.
className	string	—	Extra classes, merged with the component's own.

Source

src/components/ui/hover-lift.tsx

import { cn } from "@/lib/utils";

/** Card that rises and gains depth on hover. */
export function HoverLift({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <div
      className={cn(
        "rounded-lg border border-line bg-surface p-5 shadow-quiet transition-[transform,box-shadow,border-color] duration-300 ease-out hover:-translate-y-1.5 hover:border-line-strong hover:shadow-lift",
        className,
      )}
    >
      {children}
    </div>
  );
}

Exports HoverLift. Peer dependencies: clsx, tailwind-merge.