3D Product CardAn e-commerce product card with a real WebGL turntable.
NORDHAUS
Lyra Lounge Chair
$420Add to your project
One command adds this component to your project.
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/3d-product-cardFor dark mode, add the dark class to your <html> element:
<html class="dark">Install with AI Canvas MCP
With AI Canvas MCP, your AI knows every component we ship. Ask for “a navigation component from AI Canvas” inside Claude Code, Codex, or Cursor and it can suggest you a few options, then install the one you like. Less typing, lower token cost, modern way to build.
Get MCPAbout 3D Product Card
3D Product Card turns a normal shop listing into an interactive turntable. At rest it reads like any product card, with a name, price, wishlist, and add-to-cart button, but hovering tilts the card into a 3D display floor while the product itself lifts and slowly spins, and shoppers can drag to orbit it and study every angle. It loads a real glTF/.glb model so you can drop in your own product, fits any model to frame automatically, and adapts to both light and dark themes. The copy and call-to-action stay flat and readable in 2D while the card leans behind them. Built with raw Three.js.
Built with
Frequently asked questions
- Is 3D Product Card free to use?
- 3D Product Card is a Premium AI Canvas component. Premium unlocks the full source code and one-command installs for every Premium component and template.
- How do I install 3D Product Card?
- Premium unlocks one-command installs: run the shadcn CLI with your AI Canvas token, or connect the AI Canvas MCP server and ask your AI editor to install it for you. You can also recreate your own take on it with the included AI prompts.
- What is 3D Product Card built with?
- 3D Product Card is built with React and TypeScript, using Three.js and Tailwind CSS. It ships with both light and dark styling.
- Where would I use 3D Product Card?
- Common uses include Product page, Online store, and 3D showcase. Like every AI Canvas component, it is self-contained and drops into any React project.
- Can I remix 3D Product Card with AI?
- Yes. 3D Product Card ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.
AI Canvas