Circular Text

Words set on a circle, turning slowly, with room in the middle for a mark, a play button or a link. The ring is an SVG textPath, so it stays crisp at any size and the words are real text — screen readers get them once, from an sr-only copy, rather than letter by letter around the ring.

The text repeats as many times as fit the circumference by default, so a short phrase fills the ring and a long one goes round once. Both Collage Hero and Fashion Hero use it as their badge.

Video badge

A phrase on the ring and a play button in the middle, both in the theme colour. The ring turns once every 20 seconds and holds still under prefers-reduced-motion.

text: is the phrase on the ring; separator goes between repeats, and repeat pins how many times it goes round instead of filling by length.
children: sit in the middle, centred. Anything goes — a button, a mark, a number.
color: is var(--primary) by default, so the ring follows your theme preset and the colour picker above with no prop. Pass any CSS colour to pin it.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Circular Text

npx shadcn@latest add @algorize-ui/circular-text

components/custom/blocks/CircularTextBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Circular Text needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

Stamps

Two marks with their own separators, one with the inner ring — the first puts the theme colour on the ring, the second on the centre dot.

innerRing: draws a hairline circle just inside the text, the way a rubber stamp has an edge.
fontSize: and tracking size the ring text in units of a 100-wide circle — near enough percent of size — so the same values look the same at any size.

As a link

Wrapped in an anchor, with the centre reacting to hover through a Tailwind group.

Setcolor"currentColor": and the ring takes the text colour of its parent — text-primary on the anchor here — so it follows the theme, a link's hover and dark-mode ink together.
direction"counterclockwise": turns the other way; speed={0} stops it.

Props Reference

Prop	Type	Default	Description
`text`	`string`	Required	The words on the ring.
`separator`	`string`	`" · "`	Placed between repeats of `text`.
`repeat`	`number`	fill	How many times the text goes round. Unset, enough repeats to fill the circumference.
`size`	`number`	`128`	Outer size in pixels.
`speed`	`number`	`22`	Seconds per full turn; `0` holds still.
`direction`	`"clockwise" \| "counterclockwise"`	`"clockwise"`	Which way it turns.
`fontSize`, `tracking`	`number`	`9.5`, `0.18`	Ring text size (units of a 100-wide circle) and letter spacing (em).
`color`	`string`	`var(--primary)`	Ring text colour. `"currentColor"` follows the parent's text.
`radius`	`number`	`38`	Radius of the text path, out of 50.
`innerRing`	`boolean`	`false`	A hairline circle just inside the text.
`children`	`ReactNode`	—	What sits in the middle.