3D Pin
Card that tilts back as a glowing pin rises with a label chip and rippling rings.
- 1.9 KB gzipped
- Zero dependencies
- Reduced-motion safe
- Base UI & Radix compatible
Installation
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/3d-pin.jsonAdds components/velora/3d-pin.tsx.
Examples
Project showcase
A portfolio card with a dashboard screenshot built from Tailwind and a link inside.
24.8k
+12%
Props
| Prop | Type | Default |
|---|---|---|
title*Label shown in the chip at the top of the pin | string | — |
hrefMakes the whole card a link; without it the root is a plain div | string | — |
cardClassNameClasses for the card surface that holds the children | string | — |
children*Card content, drawn on the tilting surface | React.ReactNode | — |
Also accepts every <a> attribute, forwarded to the root element.
Accessibility
- Reduced motion
- The card never tilts and the pin does not rise; on hover or focus the pin, chip and three static rings simply appear over the flat card.
- Keyboard
- With href the whole card is one link; without it the root is a plain div and the effect shows while a link or button inside it has keyboard focus. The focused card gets a visible ring.
- Screen readers
- The chip's title is real text read with the card content (it forms part of the link name when href is set); the beam, dot and rings are aria-hidden.