# Updated: Circular Text

By Steven Van · 2026-10-13

The React Bits ring text component gains fling-and-coast spin, 3D cursor tilt, an orbit mode, a centre icon, an inner circle and natural spacing.

Circular Text in [React Bits](<https://creatorstoolbox.com/resources/react-bits>) has been [updated](<https://reactbits.dev/text-animations/circular-text>) with new motion and layout options. Fling the ring and it coasts back to its cruising speed. It also leans toward the cursor in 3D, and it can sit back like a planet's orbit.

## Layout additions

- An icon can be placed in the middle of the ring.

- An inner circle can be added.

- Natural spacing, with gaps between characters.

## Install

The component lays characters out around a circle, with optional rotation animation. It is available in JavaScript or TypeScript, with plain CSS or Tailwind. The TypeScript and Tailwind version installs with npx shadcn@latest add @react-bits/CircularText-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/text-animations/circular-text>)

[Read Updated: Circular Text on Creators Toolbox](<https://creatorstoolbox.com/blog/react-bits-updated-circular-text>)

---
Canonical source: https://creatorstoolbox.com/blog/react-bits-updated-circular-text