Is Cube Carousel free to use?

Yes. Cube Carousel is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.

How do I install Cube Carousel?

One command: npx shadcn@latest add https://aicanvas.me/r/cube-carousel.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Cube Carousel for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.

What is Cube Carousel built with?

Cube Carousel is built with React and TypeScript, using Motion and Tailwind CSS. It ships with both light and dark styling.

Where would I use Cube Carousel?

Common uses include Image gallery, Portfolio, and Hero section. Like every AI Canvas component, it is self-contained and drops into any React project.

Can I remix Cube Carousel with AI?

Yes. Cube Carousel ships with one comprehensive AI prompt written against the real source code. Open "Remix with AI" on this page to read and copy it into Claude, Cursor, ChatGPT, or any AI tool. Prompts are for remixing your own variation; for the exact component, install it with the one-command CLI.

Cube CarouselAn interactive 3D photo cube with six placeholder images on its faces.

3D & ShadersImage galleryPortfolioHero section

Add 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/cube-carousel

Free account required. Signed out, this installs a placeholder file instead of the component.

For dark mode, add the dark class to your <html> element:

Optional

<html class="dark">

Install with AI Canvas MCP

With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.

Get MCP

About Cube Carousel

Cube Carousel is a true 3D photo cube built on CSS transforms with preserve-3d, not a Three.js scene or a perspective trick. Six placeholder images sit on the faces of a cube with a 16:9:9 width-height-depth ratio. The drag interaction uses Motion onPan to apply rotation deltas on both axes simultaneously; releasing the cube lets it coast to a soft spring stop with no snap-back. No buttons, no controls, no UI chrome, just a cube and your cursor. It is well suited to portfolio galleries, product showcases, or hero sections where a tactile, physical-feeling interaction is worth more than another fade-in.

Built with

MotionTailwind CSS

Frequently asked questions

Is Cube Carousel free to use?: Yes. Cube Carousel is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.
How do I install Cube Carousel?: One command: npx shadcn@latest add https://aicanvas.me/r/cube-carousel.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Cube Carousel for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.
What is Cube Carousel built with?: Cube Carousel is built with React and TypeScript, using Motion and Tailwind CSS. It ships with both light and dark styling.
Where would I use Cube Carousel?: Common uses include Image gallery, Portfolio, and Hero section. Like every AI Canvas component, it is self-contained and drops into any React project.
Can I remix Cube Carousel with AI?: Yes. Cube Carousel ships with one comprehensive AI prompt written against the real source code. Open "Remix with AI" on this page to read and copy it into Claude, Cursor, ChatGPT, or any AI tool. Prompts are for remixing your own variation; for the exact component, install it with the one-command CLI.