Orbit Border
Orbit Border is a React animated button with a customizable, continuously rotating gradient border that adds motion to CTAs and other highlighted UI.
Orbit Border
Installation
npm i framer-motionSteps
Components
Page.tsx
OrbitBorder.tsx
Select a file to view its code
Dark Mode
This component supports Tailwind CSS dark: variants. To render this component in dark mode, add the dark className to your application's root element (for example, in app/layout.tsx).
Using <html>
<html className="dark"> ... </html>
Using <body>
<body className="dark"> ... </body>
Props
| Property | Default Value | Description |
|---|---|---|
| as | "div" | "span" | "button" | The HTML element or React component to render as the root of the Orbit Border. |
| rotate | 1 | Rotation angle of the orbit border in degrees. |
| padding | 50 | Padding around the content inside the orbit border, in pixels. |
| RingColors | "#0a52f0", "#ffffff", "#f5e2ae", "#dcd7fc" | An array of colors for the orbit border rings. |
Built with Orbit Border
See how Orbit Border is used across React Vibe blocks, templates, and components. Explore real examples to get ideas for your own projects.
