Gallery 101 - 3D cube image switcherPro
A product showcase where each tab rotates a 3D cube to a new face image, paired with a feature list for the active face; falls back to a crossfade when motion is reduced.
About Gallery 101
A product showcase where each tab rotates a 3D cube to a new face image, paired with a feature list for the active face; falls back to a crossfade when motion is reduced.
Gallery 101 is a gallery block for React and Tailwind CSS, included in Chocolate UI Pro with motion animations that respect reduced-motion settings. It ships as 81 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- cube
- 3d
- tabs
- rotate
- product
Installation
- Set up your project with
npx chocolateui initandnpx chocolateui login(see the installation guide). - Run the Chocolate UI CLI:
npx chocolateui add gallery-101Dependencies installed automatically: motion.
Uses: reveal, use-reduced-motion, utils.
Usage
import Gallery101 from "@/components/blocks/gallery-101"
export default function Page() {
return <Gallery101 />
}