Magnetic Fridge Poetry: Free React + Tailwind Component

Fridge magnet word tiles you drag freely to compose sentences, with slight rotation and a snap-on feel.

White magnet word tiles with a slight random rotation and a papery shadow, scattered across a brushed fridge door, free to be dragged around and arranged into sentences. Picking a tile up scales it, deepens its shadow, and floats it to the top; releasing it makes it wobble gently on a low-damping spring, imitating the "clack" of a magnet snapping back onto the door.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add magnetic-fridge-poetry.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Board heightheight

300

Scatter seedseed

Max tilt anglemaxTilt

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<MagneticFridgePoetry/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/magnetic-fridge-poetry.en.json

Or, once registries are configured in components.json, install it as @webberui/magnetic-fridge-poetry.

Usage

import { MagneticFridgePoetry } from "@/components/ui/magnetic-fridge-poetry";

<MagneticFridgePoetry
  words={["Moonlight", "on", "the roof", "softly", "melts"]}
  onArrange={(items) => console.log(items)}
/>

Props

Prop	Type	Default	Description
`words`	`string[]`	—	The list of words on the magnet tiles
`onArrange`	`(items: FridgeArrangement[]) => void`	—	Callback fired after any tile is dropped or moved by keyboard; each entry holds `word`, `index`, and the tile centre's `x`/`y` relative to the board (0–1)
`height`	`number`	`380`	Board height (px)
`seed`	`number`	`7`	Random seed for the initial scatter; change it for a different arrangement
`maxTilt`	`number`	`7`	Maximum random rotation of a tile (degrees)
`className`	`string`	—	Forwarded to the board container

Accessibility

Every tile is keyboard-focusable (Tab); arrow keys nudge its position and Shift + arrow keys move in larger steps, with the displacement automatically clamped inside the board
The board is role="list" and the tiles are role="listitem", with aria-label conveying the "magnet word tile" semantics and the operating hints
When the user has "reduce motion" enabled at the system level, dragging simply tracks the pointer in real time with no wobble or spring-back animation
Tiles carry touch-none, so touch dragging cannot accidentally scroll the page
The initial scatter uses seeded pseudo-random numbers, so SSR and client rendering match and there is no hydration flash

Magnetic Fridge Poetry