Skip to main content

Installation

    Usage

    showLineNumbers
    import { File, Search, Settings } from "lucide-react"
    
    import { OrbitingCircles } from "@/components/ui/orbiting-circles"
    
    showLineNumbers
    <div className="relative h-[500px] w-full overflow-hidden">
      <OrbitingCircles>
        <File />
        <Settings />
        <Search />
      </OrbitingCircles>
      <OrbitingCircles radius={100} reverse>
        <File />
        <Settings />
        <Search />
      </OrbitingCircles>
    </div>
    

    Props

    PropTypeDefaultDescription
    classNamestring-The class name for the component
    childrenReact.ReactNode-The children nodes of the component
    reversebooleanfalseIf true, the animation plays in reverse
    durationnumber20The duration of the animation in seconds
    delaynumber10The delay before the animation starts in seconds
    radiusnumber160The radius of the orbit in pixels
    pathbooleantrueIf true, a path is displayed for the orbit
    iconSizenumber30The size of the icon in pixels
    speednumber1The speed of the animation

    Build docs developers (and LLMs) love