Orbit UI

Activity Rings

PRO

Anillos concentricos de progreso, cada uno con su meta. Se animan al entrar y admiten superar el 100% dibujando una segunda vuelta sobre la primera.

npx orbitui-cli add activity-rings

Actividad de hoy

Miércoles 7 de septiembre

  • Movimiento

    1.592 / 1.400 kcal

  • Ejercicio

    45 / 60 min

  • De pie

    9 / 12 h

Props

PropTipoDescripción
rings*ActivityRing[]
sizenumber
thicknessnumber
gapnumber
showLegendboolean
classNamestring
aria-label*string

Qué instala

Archivo
components/orbit/charts/activity-rings.tsx
Componentes
cx
Paquetes npm
ninguno

A partir de la instalación el archivo es tuyo: editalo sin miedo. Si volvés a correr add y lo modificaste, el CLI pregunta antes de pisarlo.