Nested outline arcs from outer to inner, built on Arc, with optional content centred on top. Ring count, colors, stroke widths and arc sweep are props; optional spin alternates direction per ring.
The source comes with full access.
One payment of $149 ($49 for now) opens the source right here and lets the CLI install every paid component, with lifetime updates.
pnpm dlx shadcn add @01orbital/concentric-ringsnpx shadcn add @01orbital/concentric-ringsyarn shadcn add @01orbital/concentric-ringsbunx --bun shadcn add @01orbital/concentric-ringsPart of the 01orbital library. With a license, put ORBITAL_TOKEN in .env.local and the same command installs it (licensed install, pricing).
It lands at components/glow/concentric-rings.tsx, as source you own and edit.
import { ConcentricRings } from "@/components/glow/concentric-rings"
export default function ConcentricRingsDemo({
animate = false,
}: {
animate?: boolean
}) {
return (
<div className="relative aspect-square w-full max-w-md overflow-hidden rounded-lg">
<ConcentricRings
className="absolute inset-0"
size="82%"
animate={animate}
/>
</div>
)
}Prop
Type
It also accepts the HTML attributes of the element it renders.
npm: cn. The CLI installs them for you.
Registry pieces it installs with it:
Backlight Bloom
Wrapper that casts a blurred halo of light behind its children, as if the panel were lit from behind. Color, blur, intensity and spread are adjustable; an overflow-hidden ancestor clips it.
Conic Glow
Corner glow from two blurred conic color wheels, so the hue shifts as the light wraps the edge. A full-bleed overlay for a positioned card; rotation aims which hues land on the corner.