Getting Started

Templates

Mockups

Components

Special Animations

Buttons

Text Animations

Backgrounds

Orbit Rotation

An animated orbit rotation component with customizable icons and multiple orbits.

Open in

"use client"

import {
  FaApple,
  FaAws,
  FaDocker,
  FaGithub,
  FaGoogle,
  FaInstagram,
  FaLinkedin,
  FaNodeJs,
  FaReact,
  FaTwitter,
} from "react-icons/fa"
import {
  SiFacebook,
  SiNextdotjs,
  SiRedux,
  SiTypescript,
  SiVercel,
} from "react-icons/si"

import { OGLogo } from "@/components/og-logo"
import { OrbitRotation } from "@/registry/eldoraui/orbit-rotation"

export function OrbitRotationDemo() {
  const techIcons = [
    { Icon: FaReact, name: "React" },
    { Icon: FaAws, name: "AWS" },
    { Icon: FaDocker, name: "Docker" },
    { Icon: FaNodeJs, name: "Node.js" },
    { Icon: SiNextdotjs, name: "Next.js" },
    { Icon: SiVercel, name: "Vercel" },
    { Icon: SiRedux, name: "Redux" },
    { Icon: SiTypescript, name: "TypeScript" },
    { Icon: FaGithub, name: "GitHub" },
    { Icon: FaTwitter, name: "Twitter" },
    { Icon: FaLinkedin, name: "LinkedIn" },
    { Icon: FaInstagram, name: "Instagram" },
    { Icon: FaGoogle, name: "Google" },
    { Icon: FaApple, name: "Apple" },
    { Icon: SiFacebook, name: "Facebook" },
  ]

  const centerIcon = {
    Icon: ({ className }: { className?: string }) => (
      <div className={className}>
        <OGLogo width={32} height={32} />
      </div>
    ),
    name: "EldoraUI",
  }

  return (
    <div className="bg-background relative h-[500px] w-full overflow-hidden rounded-lg border p-8">
      <div className="flex h-full items-center justify-center">
        <OrbitRotation
          icons={techIcons}
          orbitCount={3}
          orbitGap={6}
          centerIcon={centerIcon}
          size="md"
        />
      </div>
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add @eldoraui/orbit-rotation

Usage

import { FaAws, FaReact } from "react-icons/fa"
 
import { OrbitRotation } from "@/components/eldoraui/orbit-rotation"

<OrbitRotation
  icons={[
    { Icon: FaReact, color: "#61DAFB", name: "React" },
    { Icon: FaAws, color: "#FF9900", name: "AWS" },
  ]}
  orbitCount={2}
  size="md"
  speed="medium"
/>

Props

Prop	Type	Default	Description
`icons`	`OrbitIcon[]`	`-`	Array of icons to display in orbits
`orbitCount`	`number`	`3`	Number of orbit rings
`orbitGap`	`number`	`8`	Gap between orbits in rem units
`centerIcon`	`OrbitIcon`	`-`	Icon to display in the center
`className`	`string`	`-`	Additional CSS classes
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the component
`speed`	`"slow" \| "medium" \| "fast"`	`"medium"`	Animation speed

OrbitIcon Interface

Prop	Type	Description
`Icon`	`React.ComponentType`	The icon component to render
`color`	`string`	The color of the icon
`name`	`string`	Optional name for accessibility

Novatrix Background Safari Browser

On This Page

Contribute

Join Us on Discord

Eldora UI

Get latest updates and support
and get help from our community

Join Now

Trusted by 1,000+ developers

Orbit Rotation

An animated orbit rotation component with customizable icons and multiple orbits.

Open in

"use client"

import {
  FaApple,
  FaAws,
  FaDocker,
  FaGithub,
  FaGoogle,
  FaInstagram,
  FaLinkedin,
  FaNodeJs,
  FaReact,
  FaTwitter,
} from "react-icons/fa"
import {
  SiFacebook,
  SiNextdotjs,
  SiRedux,
  SiTypescript,
  SiVercel,
} from "react-icons/si"

import { OGLogo } from "@/components/og-logo"
import { OrbitRotation } from "@/registry/eldoraui/orbit-rotation"

export function OrbitRotationDemo() {
  const techIcons = [
    { Icon: FaReact, name: "React" },
    { Icon: FaAws, name: "AWS" },
    { Icon: FaDocker, name: "Docker" },
    { Icon: FaNodeJs, name: "Node.js" },
    { Icon: SiNextdotjs, name: "Next.js" },
    { Icon: SiVercel, name: "Vercel" },
    { Icon: SiRedux, name: "Redux" },
    { Icon: SiTypescript, name: "TypeScript" },
    { Icon: FaGithub, name: "GitHub" },
    { Icon: FaTwitter, name: "Twitter" },
    { Icon: FaLinkedin, name: "LinkedIn" },
    { Icon: FaInstagram, name: "Instagram" },
    { Icon: FaGoogle, name: "Google" },
    { Icon: FaApple, name: "Apple" },
    { Icon: SiFacebook, name: "Facebook" },
  ]

  const centerIcon = {
    Icon: ({ className }: { className?: string }) => (
      <div className={className}>
        <OGLogo width={32} height={32} />
      </div>
    ),
    name: "EldoraUI",
  }

  return (
    <div className="bg-background relative h-[500px] w-full overflow-hidden rounded-lg border p-8">
      <div className="flex h-full items-center justify-center">
        <OrbitRotation
          icons={techIcons}
          orbitCount={3}
          orbitGap={6}
          centerIcon={centerIcon}
          size="md"
        />
      </div>
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add @eldoraui/orbit-rotation

Usage

import { FaAws, FaReact } from "react-icons/fa"
 
import { OrbitRotation } from "@/components/eldoraui/orbit-rotation"

<OrbitRotation
  icons={[
    { Icon: FaReact, color: "#61DAFB", name: "React" },
    { Icon: FaAws, color: "#FF9900", name: "AWS" },
  ]}
  orbitCount={2}
  size="md"
  speed="medium"
/>

Props

Prop	Type	Default	Description
`icons`	`OrbitIcon[]`	`-`	Array of icons to display in orbits
`orbitCount`	`number`	`3`	Number of orbit rings
`orbitGap`	`number`	`8`	Gap between orbits in rem units
`centerIcon`	`OrbitIcon`	`-`	Icon to display in the center
`className`	`string`	`-`	Additional CSS classes
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the component
`speed`	`"slow" \| "medium" \| "fast"`	`"medium"`	Animation speed

OrbitIcon Interface

Prop	Type	Description
`Icon`	`React.ComponentType`	The icon component to render
`color`	`string`	The color of the icon
`name`	`string`	Optional name for accessibility

Novatrix Background Safari Browser

On This Page

Contribute

Join Us on Discord

Eldora UI

Get latest updates and support
and get help from our community

Join Now

Trusted by 1,000+ developers