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.

API

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.

Install using CLI

npm

pnpm

bun

yarn

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

Install Manually

Install the dependencies

npm

npm install theme-colors
```

```bash [pnpm]
pnpm install theme-colors
```

```bash [bun]
bun add theme-colors
```

```bash [yarn]
yarn add theme-colors
```

Copy and paste the following code

Tetris.vue

Credits

Credits to Whbbit1999 for this component.
Inspired and ported from Nuxt UI Home.

Sparkles

A configurable sparkles component that can be used as a background or as a standalone component.

Video Text

A text component with a video background.

On This Page

API
Install using CLI
Install Manually
Credits

Star on GitHub Create Issues Join Discord Forum Follow on X Follow on Bluesky