Direction-aware Card: Free React + Tailwind Component

A hover card whose overlay slides in from the side the cursor entered, with cover and push variants.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add direction-aware-card.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Animation stylevariant

Duration (s)duration

0.4

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<DirectionAwareCard/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/direction-aware-card.en.json

Or, once registries are configured in components.json, install it as @webberui/direction-aware-card.

Usage

import { DirectionAwareCard } from "@/components/ui/direction-aware-card";

<DirectionAwareCard
  className="h-56 w-44"
  overlay={
    <>
      <p className="text-sm font-semibold">Explore now</p>
      <p className="text-xs opacity-80">The overlay slides in from the side the cursor entered</p>
    </>
  }
>
  <div className="flex h-full items-end p-4">
    <p className="text-sm font-medium">Card title</p>
  </div>
</DirectionAwareCard>

The overlay detects which side — top, bottom, left, or right — the cursor entered the card from and slides in along that side; on leave it slides back out toward the side the cursor left by.

Props

DirectionAwareCard inherits every native <div> attribute and adds:

Prop	Type	Default	Description
`overlay`	`React.ReactNode`	—	Overlay content revealed on hover / focus
`children`	`React.ReactNode`	—	The base content shown at rest
`variant`	`"cover" \| "push"`	`"cover"`	`cover` lays the overlay over the base content; `push` shoves the base content out in the same direction as the overlay slides in
`duration`	`number`	`0.4`	How long the overlay takes to slide in / out (seconds)
`overlayClassName`	`string`	—	Appended to the overlay, so you can override the default background and centered layout
`className`	`string`	—	Appended to the outermost card container

How it works

The entry direction is derived from the cursor's angle relative to the card center, normalizing the longer edge by the shorter one, so the judgement still matches visual intuition on extreme aspect ratios.
The "entry side" is recorded on enter and replaced by the "exit side" on leave, so the overlay always enters and exits along the side the cursor actually crossed.
The outermost element uses overflow-hidden to clip the sliding overlay and base content; the push variant works through transform offsets, so it never affects layout height.

Accessibility

Focusing the card with Tab (focus-visible) reveals the overlay as well, so links and buttons inside it can be operated with the keyboard.
While hidden, the overlay carries inert, which removes it from the tab order and hides it from assistive technology, avoiding elements that are invisible yet focusable.
When the user has "reduce motion" enabled at the system level, the directional slide degrades to a plain fade in / fade out with no sense of displacement.

Direction-aware Card