Tetris

Tetris background component, you can even click on a block to eliminate it.

This component uses the nuxt-only syntax with the <ClientOnly>. If you are not using Nuxt, you can simply remove it.

Note: This component requires theme-colors as a dependency.

Install using CLI

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://inspira-ui.com/r/tetris.json"

npm

pnpm

bun

yarn

npm install theme-colors

Tetris.vue

Without Blur or overlay

Prop Name	Type	Default	Description
`class`	`string`	`""`	Additional class names to style the component.
`base`	`number`	`10`	How many blocks do you have in a row.
`square-color`	`string`	`""`	Square color.

On This Page