Interfaces that organize themselves

Tetris UI is a spatial design system. Components are modular blocks that fall, stack, lock, and clear, driven by priority, available space, and user action.

Priority packer (0 to 100)Glass, border, flat surfacesViewport: desktop / tablet / mobileShapeFrame silhouettes

TETRIS UI

npm i @stack_layout/tetris-ui

7

Shapes

5

Phases

0 to 100

Priority

Tomorrow doesn't wait. Neither do we.

Ship layout rules, not another fixed dashboard.

Live system

Drop Messages, Shipping, or Goals into the grid. Complete a task to line-clear. Shrink the viewport and watch low-priority blocks yield first.

  • Remove a block → REFLOW
  • Switch Desktop / Tablet / Mobile
  • Priority 95 claims space before 40
START

Package

v0.2.17

Published as @stack_layout/tetris-ui. Peer deps: React 18+.

import { Block, TetrisProvider }
  from "@stack_layout/tetris-ui"

Motion is the product

Every interaction is a phase. Clearing work isn't a toast; it's a line clear that returns space to higher priority blocks.

Play the tetromino board
  1. 01

    FALL

    Block enters and claims intent

  2. 02

    STACK

    Neighbors settle into gaps

  3. 03

    LOCK

    Layout commits to the grid

  4. 04

    CLEAR

    Completed work leaves the board

  5. 05

    REFLOW

    Priority reclaim fills the void

SHAPE

Seven primitives. Each carries a mental model, not decoration. Use them as grammar for what a module is allowed to do.

I

Timelines, banners

O

Metrics, stats

T

Nav + feature

L

Feed + context

S

Offset pairs

J

Rail + panel

Z

Alerts, signals

Motion loop

FALL → STACK → LOCK → CLEAR → REFLOW

Beyond layout

Traditional UI pins components to coordinates. Tetris UI encodes rules (preferred size, min/max footprint, adjacency, and priority), then optimizes the board.

Traditional

Component → Position

Tetris UI

Rules → Spatial fit

Read the docs