Cube

Turns a lattice of dots a quarter at a time, the way a puzzle cube twists.

Configurations

Supported configurations for this component.

3 examples

Default

Dense

Paused

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/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Every prop this component accepts. Any other prop is forwarded to the underlying element.

Prop	Type	Default	Description
density	`'default'\|'dense'`	-	dots per edge (15 or 18); defaults to 'default'
seed	`number`	-	move script and entrance — same seed, same sequence, every render
paused	`boolean`	-	hold the cube still on its composed frame
color	`string`	-	lattice dot ink; defaults to text.muted. Any CSS colour syntax. Depth is alphas of THIS value, so one prop recolours the whole lattice.
lightColor	`string`	-	the lit dots' ink; defaults to text.primary.
className	`string`	-	Additional CSS classes applied to the root element.

Displays a status message in the flow of the page, at a severity from note to fault.

Frames something an agent produced, such as a table or a chart, under a title bar with its actions.

Represents a person as a square image tile that falls back to their initials.