3d Pin: Free React + Tailwind Component

A gradient 3D product pin that unfolds on hover — the card leans back to expose a floating capsule label and a radar-ripple beam.

As the mouse enters, the card leans back along the X axis, a clickable capsule label floats up above it, and a gradient beam with concentric ripples shoots up from the ground, giving the spatial feel of a three-dimensional pin.

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 3d-pin.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.

Label texttitle

Tilt angletilt

Gradient palettegradient

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

<ThreeDPin/>

    </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/3d-pin.en.json

Or, once registries are configured in components.json, install it as @webberui/3d-pin.

Usage

import { ThreeDPin } from "@/components/ui/3d-pin";

<ThreeDPin title="webberui.com" href="https://webberui.com">
  <div className="h-[16rem] w-[16rem]">Card content</div>
</ThreeDPin>

Put it inside a centered, bounded container (for example flex items-center justify-center), and the pin and beam will rise from the card's center.

Props

Prop	Type	Default	Description
`title`	`string`	`"webberui.com"`	Text on the capsule label that floats up
`href`	`string`	—	Label link; when set, the whole card is clickable
`gradient`	`string`	`"from-cyan-400 via-sky-500 to-emerald-400"`	Gradient classes for the label underline and the beam
`tilt`	`number`	`40`	Angle the card leans back on hover (deg)
`children`	`ReactNode`	—	Card content
`containerClassName`	`string`	—	Applied to the outermost interactive container
`className`	`string`	—	Applied to the card content frame

Accessibility

When the user has "reduce motion" enabled at the system level, the card no longer leans back and the concentric ripples stay static instead of running an infinite animation
When href is present the label renders as a link, carrying rel="noreferrer noopener" and opening in a new tab

3d Pin