3d Card

Interactive 3D card with hover tilt effects

$ npx @hritik-sharmaa/repeat-ui add card-3d-card
Category
Card
Added
Aug 14, 2025
Version
2.0.0
Packages
None
Flavors
TS · JS · Tailwind · CSS
Live preview
Repeat UI
Jon Snow

Jon Snow

He knows nothing

Customize
15°
import Card3dCard from "@/components/repeat-ui/card-3d-card/preview";

<Card3dCard
  companyName="Repeat UI"
  userName="Jon Snow"
  userRole="He knows nothing"
/>

Installation

  1. Run the command

    Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.

    $ npx @hritik-sharmaa/repeat-ui add card-3d-card --variant ts-tailwind

  2. Use it

    The files are in components/repeat-ui/card-3d-card/.

    import Card3dCard from "@/components/repeat-ui/card-3d-card/preview";

export default function Page() {
  return <Card3dCard />;
}

Props

PropTypeDefaultDescription
companyNamestring"Repeat UI"Name beside the logo.
logostring-Logo image URL.
userNamestring"Jon Snow"The person's name.
userRolestring"He knows nothing"The line under the name.
avatarstring-Image URL; without one, the card shows the name's first letter.
maxTiltnumber15Largest tilt in degrees, at the card's edges.
colorFromstring"#ff6ec7"Gradient start, at rest.
colorTostring"#4facfe"Gradient end, at rest.
textColorstring"#111827"Text colour.
shiftHuebooleantrueShift the gradient's colours as the pointer moves.
glarebooleantrueShow a light glare that follows the pointer.
classNamestring""Extra classes for the root element.

More card

See all
Pricing CardElegant pricing plan showcase card
Profile CardBeautiful user profile display card
Ink RevealBrush the pointer over an image to paint its colours in