# Updated: Magnet Lines

By Steven Van · 2026-10-12

The React Bits component now fills its container, adds arrow and compass shapes and a 3D tilt, and installs through shadcn in JS or TS.

[React Bits](<https://creatorstoolbox.com/resources/react-bits>) has [updated Magnet Lines](<https://reactbits.dev/backgrounds/magnet-lines>) so it now works as a background that fills its container. The original square version is still available.

## How the lines behave

The lines swing toward the cursor on springs, ripple outward from it and spin with each click. The component page describes it as a field of magnetic lines.

## New options

- New field modes

- Arrow and compass shapes

- A 3D tilt

## Installing

The component can be added in JavaScript or TypeScript, with plain CSS or Tailwind. The TypeScript and Tailwind version installs with npx shadcn@latest add @react-bits/MagnetLines-TS-TW.

![React Bits](<https://reactbits.dev/favicon.ico>)

React Bits

An open-source collection of 200+ animated, interactive React components and micro-interactions.

[View React Bits →](<https://creatorstoolbox.com/resources/react-bits>)

Sources

[Original source](<https://reactbits.dev/backgrounds/magnet-lines>)

[Read Updated: Magnet Lines on Creators Toolbox](<https://creatorstoolbox.com/blog/react-bits-updated-magnet-lines>)

---
Canonical source: https://creatorstoolbox.com/blog/react-bits-updated-magnet-lines