Ring Zepa

Name: Zepa UI
Author: Sameer Shaik

Concentric progress rings — three nested arcs that sweep to their values when the illustration scrolls into view, with the readouts counting up alongside them. Radii are derived from size, thickness and gap so any ring count works, and the resting state is the finished state, so the values still render correctly with motion reduced.

Install

shadcn CLI

npx shadcn@latest add https://zepa.design/r/ring-zepa.json

GitHub: @vij-sameerb5

Code

/**
 * Zepa UI — ring-zepa
 * https://zepa.design/components/ring-zepa
 * Free to use in your projects. Please don't republish or resell as your own.
 */
"use client"

import { RingZepa } from "./ui/ring-zepa"

export default function RingZepaDemo() {
  return (
    <section
      className="relative flex w-full items-center justify-center bg-[#08080a] px-6 py-16 text-white"
      style={{
        minHeight: "100vh",
        fontFamily: "var(--font-manrope), ui-sans-serif, system-ui, sans-serif",
      }}
    >
      <RingZepa />
    </section>
  )
}

export const __demoId = "fea2cbe24649"

Live demo

Loading demo…