Viora LogoViora UI
Login

Circular Text

Text arranged in a circle with rotation animation and hover effects.

demo-circular-text.tsx
Loading source code...

Installation

pnpm dlx viora-ui add circular-text
npx viora-ui add circular-text
yarn viora-ui add circular-text
bunx --bun viora-ui add circular-text

Usage

import { CircularText } from "viora-ui";
import { CircularText } from "viora-ui";

export default function CircularTextDemo() {
  return (
    <div className="flex min-h-[350px] w-full items-center justify-center p-6">
      <CircularText />
    </div>
  );
}

API Reference

CircularText

PropTypeDefaultDescription
textstring-Configuration for text.
spinDuration?number-Configuration for spinDuration.
onHover?'slowDown' | 'speedUp' | 'pause' | 'goBonkers'-Callback fired on hover event.
className?string""Additional CSS classes for custom styling.

Built by Otis

Last updated: 9/13/2026