ObsidianUIObsidianUI
DocumentationRubik Cube

Rubik Cube

An interactive 3D Rubik’s cube that rotates automatically and can be dragged to rotate manually.

Install using CLI

npx shadcn@latest add "https://obsidianui.dev/r/rubik-cube.json"

Install Manually

1

Install dependencies

npm install framer-motion clsx tailwind-merge
2

Add util file

Create a file lib/utils.ts:

import { ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';


export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
3

Copy the source code

Copy the code into components/ui/rubik-cube.tsx

Usage

1import { RubikCube } from "@/components/ui/rubik-cube"
2

3export function Demo() {
4return (
5  <div className="h-[400px] flex items-center justify-center">
6    <RubikCube mode="normal" dimensionMode="3x3" />
7  </div>
8)
9}

Props

Prop NameTypeDefaultDescription
mode'skeleton' | 'normal' | 'glass''normal'Visual style
dimensionMode'2x2' | '3x3' | '4x4''3x3'Cube size
Rolling Ball Scroll IndicatorScroll Effect